fix(components): [select] with teleported="false" dropdown closes abnormally (#17548)

* fix(components): with teleported=false dropdown closes abnormally

* fix: test error

* fix: test error

---------

Co-authored-by: btea <2356281422@qq.com>
Co-authored-by: qiang <qw13131wang@gmail.com>
This commit is contained in:
Aaron-zon 2024-08-07 11:44:03 +08:00 committed by GitHub
parent 96a081b755
commit 50ba6c2c77
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 14 deletions

View File

@ -323,8 +323,9 @@ describe('Select', () => {
DEFAULT_PLACEHOLDER
)
const select = wrapper.findComponent({ name: 'ElSelect' })
await select.trigger('mouseenter')
await select.trigger('click')
const trigger = wrapper.find(`.${WRAPPER_CLASS_NAME}`)
await trigger.trigger('mouseenter')
await trigger.trigger('click')
await nextTick()
expect((select.vm as any).expanded).toBe(true)
})
@ -1592,8 +1593,9 @@ describe('Select', () => {
() => ({ value: 'test' })
)
const vm = wrapper.vm as any
await wrapper.trigger('mouseenter')
await wrapper.trigger('click')
const trigger = wrapper.find(`.${WRAPPER_CLASS_NAME}`)
await trigger.trigger('mouseenter')
await trigger.trigger('click')
const selectVm = wrapper.findComponent({ name: 'ElSelect' }).vm as any
expect(selectVm.expanded).toBe(true)
expect(wrapper.find(`.${PLACEHOLDER_CLASS_NAME}`).text()).toBe('test')
@ -1673,9 +1675,9 @@ describe('Select', () => {
value: 'test',
})
)
const select = wrapper.findComponent({ name: 'ElSelect' })
await select.trigger('mouseenter')
await select.trigger('click')
const trigger = wrapper.find(`.${WRAPPER_CLASS_NAME}`)
await trigger.trigger('mouseenter')
await trigger.trigger('click')
await nextTick()
expect(
!!(document.querySelector('.el-select__popper') as HTMLElement).style
@ -2196,9 +2198,10 @@ describe('Select', () => {
clearable: true,
})
const select = wrapper.findComponent({ name: 'ElSelect' })
await select.trigger('click')
const trigger = wrapper.find(`.${WRAPPER_CLASS_NAME}`)
await trigger.trigger('click')
expect((select.vm as any).expanded).toBe(true)
await select.trigger('click')
await trigger.trigger('click')
expect((select.vm as any).expanded).toBe(false)
})
@ -2208,11 +2211,11 @@ describe('Select', () => {
clearable: true,
})
const select = wrapper.findComponent({ name: 'ElSelect' })
await select.trigger('click')
const trigger = wrapper.find(`.${WRAPPER_CLASS_NAME}`)
await trigger.trigger('click')
expect((select.vm as any).expanded).toBe(true)
await select.trigger('click')
await trigger.trigger('click')
expect((select.vm as any).expanded).toBe(false)
})

View File

@ -5,7 +5,6 @@
:class="[nsSelect.b(), nsSelect.m(selectSize)]"
@[mouseEnterEventName]="states.inputHovering = true"
@mouseleave="states.inputHovering = false"
@click.prevent.stop="toggleMenu"
>
<el-tooltip
ref="tooltipRef"
@ -35,6 +34,7 @@
nsSelect.is('filterable', filterable),
nsSelect.is('disabled', selectDisabled),
]"
@click.prevent.stop="toggleMenu"
>
<div
v-if="$slots.prefix"

View File

@ -14,6 +14,7 @@ afterEach(() => {
document.documentElement.innerHTML = ''
})
const WRAPPER_CLASS_NAME = 'el-select__wrapper'
const PLACEHOLDER_CLASS_NAME = 'el-select__placeholder'
describe('TimeSelect', () => {
@ -137,7 +138,8 @@ describe('TimeSelect', () => {
})
wrapper.findComponent(TimeSelect).vm.$.exposed!.focus()
await wrapper.findComponent(TimeSelect).trigger('click')
const trigger = wrapper.find(`.${WRAPPER_CLASS_NAME}`)
await trigger.trigger('click')
await nextTick()
await nextTick()