Inside the Drawer component, input element with camel case id doesn't get focus.

[BhupenSahoo-Suraksha]

Describe the bug

The first input fails to get focus but the second input works fine

<script lang="ts">
  import Button from '$/lib/components/ui/button/button.svelte'
  import * as Drawer from '$lib/components/ui/drawer/index'
</script>

<Drawer.Root direction="right">
  <Drawer.Trigger>
    <Button>
      open
    </Button>
  </Drawer.Trigger>
  <Drawer.Content class="h-screen rounded-l ml-[25vw] overflow-y-auto overflow-x-hidden">
    <input
      type="text"
      id="testFilter"
      placeholder="Search"
    />
    <input
      type="text"
      id="testfilter"
      placeholder="Search"
    />
    <Drawer.Footer class="sticky bottom-0 inset-x-0 bg-white flex flex-row">
      <Button>Submit</Button>
      <Drawer.Close>
        <Button>Cancel</Button>
      </Drawer.Close>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Reproduction

https://stackblitz.com/edit/github-ws8tfhzc-fxeb5bsx?file=src%2Froutes%2F%2Bpage.svelte

Logs

System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (4) x64 Intel(R) Core(TM) i3-10110U CPU @ 2.10GHz
    Memory: 5.36 GB / 15.77 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.10.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: 132.0.6834.197
    Edge: Chromium (131.0.2903.70)
    Internet Explorer: 11.0.26100.1882
  npmPackages:
    @sveltejs/kit: ^2.5.0 => 2.5.0 
    bits-ui: ^0.11.7 => 0.11.7 
    cmdk-sv: ^0.0.17 => 0.0.17 
    lucide-svelte: ^0.474.0 => 0.358.0 
    svelte: ^4.2.0 => 4.2.0 
    svelte-radix: ^1.1.0 => 1.1.0 
    vaul-svelte: ^0.3.2 => 0.3.2

Severity

annoyance

[ieedan]

In the repro you provided it seems to work normally.

[BhupenSahoo-Suraksha]

In the repro you provided it seems to work normally.

Steps:

• Open drawer(by clicking on 'open')
• Click on the 3st input box, it will get focus
• Then click on the 1st or 2nd input box, it is not getting focus

    <input
      type="text"
      id="testFilter"
      placeholder="Search"
    />
    <input
      type="text"
      id="testfilter"
      placeholder="Search"
    />
    <input
      type="text"
      id="test-filter"
      placeholder="Search"
    />

Have updated the code on : https://stackblitz.com/edit/github-ws8tfhzc-kvu5ymme?file=src%2Froutes%2F%2Bpage.svelte

[ieedan]

Ah I see now it seems like none of them are focusable in that example weirdly enough.

This does appear to be fixed with the @next version.

[huntabyte]

Please use @next as we aren't updating the pre-1.0 versions of the older primitives due to time limitations.