fix(components): [select/select-v2] correct the trigger timing of visible-change (#22897)

fix(components): correct the trigger timing of visible-change

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

@@ -2614,4 +2614,44 @@ describe('Select', () => {
     await input.trigger('click')
     expect(selectVm.states.hoveringIndex).toBe(1)
   })
+
+  it('should trigger visible-change when dropdownMenuVisible changes', async () => {
+    const states = ['Alabama', 'Alaska']
+    const list = states.map((item): ListItem => {
+      return { value: `value:${item}`, label: `label:${item}` }
+    })
+    const options = ref([])
+    const handleVisibleChange = vi.fn()
+    const remoteMethod = (query: string) => {
+      if (query !== '') {
+        options.value = list.filter((item) => {
+          return item.label.toLowerCase().includes(query.toLowerCase())
+        })
+      } else {
+        options.value = []
+      }
+    }
+    const wrapper = createSelect({
+      data() {
+        return {
+          filterable: true,
+          remote: true,
+          options,
+          value: [],
+        }
+      },
+      methods: {
+        remoteMethod,
+        onVisibleChange: handleVisibleChange,
+      },
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('click')
+    expect(handleVisibleChange).not.toHaveBeenCalled()
+    await input.setValue('label:Alabama')
+    expect(handleVisibleChange).toHaveBeenCalledTimes(1)
+    await input.trigger('blur')
+    expect(handleVisibleChange).toHaveBeenCalledTimes(2)
+  })
 })

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

@@ -893,7 +893,6 @@ const useSelect = (props: SelectV2Props, emit: SelectV2EmitFn) => {
       states.isBeforeHide = true
       createNewOption('')
     }
-    emit('visible-change', val)
   })
 
   watch(
@@ -990,6 +989,7 @@ const useSelect = (props: SelectV2Props, emit: SelectV2EmitFn) => {
         stop?.()
         stop = undefined
       }
+      emit('visible-change', newVal)
     }
   )
 

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

@@ -4117,6 +4117,7 @@ describe('Select', () => {
 
     wrapper.unmount()
   })
+
   test('limitReached: hovering via DOM event should not update index nor add class', async () => {
     wrapper = _mount(
       `
@@ -4147,4 +4148,64 @@ describe('Select', () => {
     expect(selectVm.states.hoveringIndex).toBe(0)
     expect(Array.from(optionEls[1].classList)).not.toContain('is-hovering')
   })
+
+  test('should trigger visible-change when dropdownMenuVisible changes', async () => {
+    const handleVisibleChange = vi.fn()
+    wrapper = mount({
+      template: `
+      <el-select
+        v-model="value"
+        remote
+        :remote-method="remoteMethod"
+        :loading="loading"
+        @visible-change="handleVisibleChange"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item"
+        />
+      </el-select>`,
+      components: { ElSelect: Select, ElOption: Option },
+      data() {
+        return {
+          options: [],
+          value: [],
+          list: [],
+          loading: false,
+          states: ['Alabama', 'Alaska'],
+          handleVisibleChange,
+        }
+      },
+      mounted() {
+        this.list = this.states.map((item) => {
+          return { value: `value:${item}`, label: `label:${item}` }
+        })
+      },
+      methods: {
+        remoteMethod(query) {
+          if (query !== '') {
+            this.loading = true
+            setTimeout(() => {
+              this.loading = false
+              this.options = this.list.filter((item) => {
+                return item.label.toLowerCase().includes(query.toLowerCase())
+              })
+            }, 200)
+          } else {
+            this.options = []
+          }
+        },
+      },
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('click')
+    expect(handleVisibleChange).not.toHaveBeenCalled()
+    await input.setValue('label:Alabama')
+    expect(handleVisibleChange).toHaveBeenCalledTimes(1)
+    await input.trigger('blur')
+    expect(handleVisibleChange).toHaveBeenCalledTimes(2)
+  })
 })

packages/components/select/src/useSelect.ts

@@ -309,7 +309,6 @@ export const useSelect = (props: SelectProps, emit: SelectEmits) => {
         states.previousQuery = null
         states.isBeforeHide = true
       }
-      emit('visible-change', val)
     }
   )
 
@@ -902,6 +901,7 @@ export const useSelect = (props: SelectProps, emit: SelectEmits) => {
         stop?.()
         stop = undefined
       }
+      emit('visible-change', newVal)
     }
   )