fix(components): [select-v2] avoid displaying 'false' incorrectly during remote search (#22495)

fix(components): [select-v2] avoid displaying 'false' incorrectly

packages/components/select-v2/__tests__/select.test.ts

@@ -2501,4 +2501,38 @@ describe('Select', () => {
       expect(wrapper.find('.custom-tag').text()).toBe('enabled')
     })
   })
+
+  it('loading appears on first click when remote', async () => {
+    const wrapper = _mount(
+      `
+        <el-select
+          v-model="value"
+          filterable
+          remote
+          :remote-method="remoteMethod"
+          :loading="loading"
+          :options="options"
+        >
+        </el-select>`,
+      {
+        data() {
+          return { options: [], value: '', loading: false }
+        },
+        methods: {
+          remoteMethod() {
+            this.loading = true
+            setTimeout(() => {
+              this.loading = false
+            }, 1000)
+          },
+        },
+      }
+    )
+
+    const select = wrapper.findComponent(Select)
+    const selectVm = select.vm as any
+    const input = wrapper.find('input')
+    await input.trigger('click')
+    expect(selectVm.dropdownMenuVisible).toBeTruthy()
+  })
 })

packages/components/select-v2/src/useSelect.ts

@@ -181,12 +181,15 @@ const useSelect = (props: SelectV2Props, emit: SelectV2EmitFn) => {
 
   const debounce = computed(() => (props.remote ? 300 : 0))
 
+  const isRemoteSearchEmpty = computed(
+    () => props.remote && !states.inputValue && !hasOptions.value
+  )
+
   // filteredOptions includes flatten the data into one dimensional array.
   const emptyText = computed(() => {
     if (props.loading) {
       return props.loadingText || t('el.select.loading')
     } else {
-      if (props.remote && !states.inputValue && !hasOptions.value) return false
       if (
         props.filterable &&
         states.inputValue &&
@@ -387,7 +390,7 @@ const useSelect = (props: SelectV2Props, emit: SelectV2EmitFn) => {
 
   const dropdownMenuVisible = computed({
     get() {
-      return expanded.value && emptyText.value !== false
+      return expanded.value && (props.loading || !isRemoteSearchEmpty.value)
     },
     set(val: boolean) {
       expanded.value = val