element-plus: [Component] [select] Select not working when wrapped with label

Bug Type: Component

Environment

Vue Version: 3.2.45
Element Plus Version: 2.2.32
Browser / OS: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:101.0) Gecko/20100101 Firefox/101.0
Build Tool: Vite

Reproduction

Related Component

el-select

Reproduction Link

Element Plus Playground

Steps to reproduce

Try opening the select in the linked demo

What is Expected?

The select dropdown should open when the select element is clicked

What is actually happening?

The select dropdown isn’t opening

Additional comments

The bug only seems to occur with multi selects that have a selected value. When the select is cleared it works again until a new value is selected.

About this issue

Original URL
State: closed
Created a year ago
Comments: 18 (8 by maintainers)

Most upvoted comments

I very much agree with @itsalimanuel point of view, because el-select is not a native select, it is composed of div, input, etc., triggering depends on clicking on div, and then when using label wrapping, it triggers an implicit label, which is equal to When clicking, only the focus event of the label is triggered, but as for why it can be expanded normally when there is no option value, there is no time to troubleshoot. Then, you can add @click.prevent to el-select.

chenxch on Feb 27, 2023