Clicking on label for a select component opens it

[olegpolin]

Describe the bug

Clicking on a label for a select component triggers it, clicking it again doesn't close it. Is this intended behavior?

Reproduction

https://stackblitz.com/edit/shadcn-svelte-select-label

<script lang="ts">
  import { Label } from "$lib/components/ui/label";
  import * as Select from "$lib/components/ui/select";
</script>

<div class="flex flex-col items-center gap-2">
  <Label for="options" class="w-[180px]">Options:</Label>
  <Select.Root>
    <Select.Trigger id="options" class="w-[180px]">
      <Select.Value placeholder="Select" />
    </Select.Trigger>
    <Select.Content>
      <Select.Item value="option1">Option 1</Select.Item>
      <Select.Item value="option2">Option 2</Select.Item>
      <Select.Item value="option3">Option 3</Select.Item>
    </Select.Content>
  </Select.Root>
</div>

Logs

No response

System Info

Latest versions of everything
Tested on Chrome on Windows
On Android Chrome and IOS Safari, clicking the label still opens the select, but clicking the label again closes it.

Severity

annoyance

[shyakadavis]

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. 🤷‍♂️

[olegpolin]

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.

[shyakadavis]

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.

[huntabyte]

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.

[olegpolin]

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)

[huntabyte]

@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.

[olegpolin]

Got it, thanks