Clicking on label for a select component opens it about shadcn-svelte HOT 7 OPEN

@olegpolin Yeah, this is because it is being registered as an "outside click" followed by a "click." Clicking the label is outside the content, causing the content to close, and then the label triggers a click on the button, which reopens it.

I'll look into getting this resolved in the Svelte 5 version of Bits I'm currently working on.

from shadcn-svelte.

Hmm... isn't this the native/expected behaviour?

When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

If you don't want this behaviour, remove the for="options" but that just leads to poor U/X in my opinion. 🤷‍♂️

from shadcn-svelte.

Native behavior with a <label> associated with a <select> doesn't actually open the select, it should just pass the focus to the select element, as far as I can tell.

It seems like the <Select> component in shadcn-svelte is actually a button with a popover, which helps explain the abnormal behavior.

from shadcn-svelte.

Hunh, you're right.

TIL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

But still, removing the for in your attached repro rids one of this behaviour.

Also, re-reading your issue, I can finally see the "not closing" it part. And I agree, it feels odd/wrong.

Maybe Hunter will provide some context.

from shadcn-svelte.

So, when a label is associated with a button, the only option when clicking said label is to "click" the button.

I tried researching to see if there is a way to determine if the 'click' event came from a select and came up empty-handed.

from shadcn-svelte.

The weirder issue is that clicking the label again doesn't close the select, but closes it and reopens it, as if it is being clicked twice (at least on chrome on windows)

from shadcn-svelte.

Got it, thanks

from shadcn-svelte.