fix(components): [select] click label only focus in form (#9798)

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

@@ -310,6 +310,7 @@ describe('Select', () => {
     expect(wrapper.classes()).toContain('el-select')
     expect(findInnerInput().placeholder).toBe('Select')
     const select = wrapper.findComponent({ name: 'ElSelect' })
+    await select.trigger('mouseenter')
     await select.trigger('click')
     await nextTick()
     expect((select.vm as any).visible).toBe(true)
@@ -753,6 +754,7 @@ describe('Select', () => {
       'is-reverse'
     )
     // open dropdown
+    await wrapper.trigger('mouseenter')
     wrapper.trigger('click')
     await nextTick()
     expect(wrapper.find('.el-select__caret').classes()).toContain('is-reverse')
@@ -1296,6 +1298,7 @@ describe('Select', () => {
       () => ({ value: 'test' })
     )
     const vm = wrapper.vm as any
+    await wrapper.trigger('mouseenter')
     await wrapper.trigger('click')
     const selectVm = wrapper.findComponent({ name: 'ElSelect' }).vm as any
     expect(selectVm.visible).toBe(true)
@@ -1375,6 +1378,7 @@ describe('Select', () => {
       })
     )
     const select = wrapper.findComponent({ name: 'ElSelect' })
+    await select.trigger('mouseenter')
     await select.trigger('click')
     await nextTick()
     expect(
@@ -1773,6 +1777,7 @@ describe('Select', () => {
       clearable: true,
     })
     const select = wrapper.findComponent({ name: 'ElSelect' })
+    await select.trigger('mouseenter')
     const suffixIcon = select.find('.el-input__suffix')
     await suffixIcon.trigger('click')
     expect((select.vm as any).visible).toBe(true)
@@ -1780,6 +1785,21 @@ describe('Select', () => {
     expect((select.vm as any).visible).toBe(false)
   })
 
+  test('mouseenter click', async () => {
+    wrapper = getSelectVm({
+      filterable: true,
+      clearable: true,
+    })
+    const select = wrapper.findComponent({ name: 'ElSelect' })
+
+    await select.trigger('click')
+    expect((select.vm as any).visible).toBe(false)
+
+    await select.trigger('mouseenter')
+    await select.trigger('click')
+    expect((select.vm as any).visible).toBe(true)
+  })
+
   describe('should show all options when open select dropdown', () => {
     async function testShowOptions({ filterable, multiple }: SelectProps = {}) {
       wrapper = getSelectVm({ filterable, multiple })
@@ -1845,6 +1865,7 @@ describe('Select', () => {
       const secondInputLetter = 'aa'
 
       await nextTick()
+      await wrapper.trigger('mouseenter')
 
       const input = wrapper.find(
         multiple ? '.el-select__input' : '.el-input__inner'

packages/components/select/src/select.vue

@@ -3,6 +3,8 @@
     ref="selectWrapper"
     v-click-outside:[popperPaneRef]="handleClose"
     :class="wrapperKls"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
     @click.stop="toggleMenu"
   >
     <el-tooltip
@@ -465,6 +467,8 @@ export default defineComponent({
       scrollbar,
       queryChange,
       groupQueryChange,
+      handleMouseEnter,
+      handleMouseLeave,
     } = useSelect(props, states, ctx)
 
     const { focus } = useFocus(reference)
@@ -644,6 +648,8 @@ export default defineComponent({
       selectTagsStyle,
       nsSelect,
       tagTextStyle,
+      handleMouseEnter,
+      handleMouseLeave,
     }
   },
 })

packages/components/select/src/useSelect.ts

@@ -61,6 +61,7 @@ export function useSelectStates(props) {
     isSilentBlur: false,
     prefixWidth: 11,
     tagInMultiLine: false,
+    mouseEnter: false,
   })
 }
 
@@ -788,7 +789,10 @@ export const useSelect = (props, states: States, ctx) => {
     }
   }
 
-  const toggleMenu = () => {
+  const toggleMenu = (e?: PointerEvent) => {
+    if (e && !states.mouseEnter) {
+      return
+    }
     if (!selectDisabled.value) {
       if (states.menuVisibleOnFocus) {
         states.menuVisibleOnFocus = false
@@ -853,6 +857,14 @@ export const useSelect = (props, states: States, ctx) => {
     }
   }
 
+  const handleMouseEnter = () => {
+    states.mouseEnter = true
+  }
+
+  const handleMouseLeave = () => {
+    states.mouseEnter = false
+  }
+
   return {
     optionsArray,
     selectSize,
@@ -902,5 +914,9 @@ export const useSelect = (props, states: States, ctx) => {
     tags,
     selectWrapper,
     scrollbar,
+
+    // Mouser Event
+    handleMouseEnter,
+    handleMouseLeave,
   }
 }