fix(components): [select-v2] corrent focus to input when select clicked (#17362)

* fix(components): [select-v2] fix remote init

remote-search scenarios shoule be not initialized

* Revert "fix(components): [select-v2] fix remote init"

This reverts commit d8326888e3df96dee482b9c8098738bc698215af.

* fix(components): [select-v2] no trigger init-states when filter/remote

* test(components): [select-v2] add test for no init when remote search

* fix(components): [select-v2] add back the necessary condition

* fix(components): [select-v2] correct input focus

input shoule be fouce when click el-select

* fix(components): [select-v2] focus first and then completed taggle-menu

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

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import { nextTick } from 'vue'
+import { nextTick, ref } from 'vue'
 import { NOOP } from '@vue/shared'
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { hasClass } from '@element-plus/utils'
@@ -1488,6 +1488,50 @@ describe('Select', () => {
     })
   })
 
+  it('remote search should be not initialized', async () => {
+    const states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
+    const list = states.map((item): ListItem => {
+      return { value: `value:${item}`, label: `label:${item}` }
+    })
+    const options = ref([{ value: `value:Alabama`, label: `label:Alabama` }])
+    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,
+          multiple: true,
+          value: ['value:Alabama'],
+        }
+      },
+      methods: {
+        remoteMethod,
+      },
+    })
+    const input = wrapper.find('input')
+    await input.trigger('click')
+    input.element.value = 'A'
+    await input.trigger('input')
+
+    const tag = wrapper.find('.el-select__tags-text')
+    // filter or remote-search scenarios should be not initialized
+    expect(tag.text()).toBe('label:Alabama')
+
+    await wrapper.trigger('blur')
+    await input.trigger('click')
+    // filter or remote-search scenarios should be not initialized
+    expect(tag.text()).toBe('label:Alabama')
+  })
+
   it('keyboard operations', async () => {
     const wrapper = createSelect({
       data() {

packages/hooks/use-focus-controller/index.ts

@@ -56,7 +56,7 @@ export function useFocusController<T extends HTMLElement>(
   // TODO: using useEventListener will fail the test
   // useEventListener(target, 'focus', handleFocus)
   // useEventListener(target, 'blur', handleBlur)
-  useEventListener(wrapperRef, 'click', handleClick)
+  useEventListener(wrapperRef, 'click', handleClick, true)
 
   return {
     wrapperRef,