Input field not interactive when using composition

[leonardodipace]

Describe the bug

I have a Select inside of a Dialog and I'm trying to add an input field to the Select.Content to act like a search bar.
When both Dialog and Select are open, the input field is not interactive and I cannot type anything.

Reproduction:

<script lang="ts">
  import { Dialog, Select } from "bits-ui"
</script>

<Dialog.Root>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>

  <Dialog.Portal>
    <Dialog.Content>
      <Select.Root type="single">
        <Select.Trigger>Open Select</Select.Trigger>

        <Select.Portal>
          <Select.Content>
            <input type="text" placeholder="Search..." />

            <Select.Item value="1">Item 1</Select.Item>
            <Select.Item value="2">Item 2</Select.Item>
            <Select.Item value="3">Item 3</Select.Item>
          </Select.Content>
        </Select.Portal>
      </Select.Root>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Reproduction

I have provided a code snippet

Logs

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (4) x64 Intel Xeon Processor (Icelake)
    Memory: 10.92 GB / 15.73 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 23.3.0 - ~/.nvm/versions/node/v23.3.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v23.3.0/bin/npm
    bun: 1.2.11 - ~/.bun/bin/bun
  npmPackages:
    @sveltejs/kit: ^2.20.7 => 2.20.7 
    bits-ui: ^1.3.19 => 1.3.19 
    svelte: ^5.28.2 => 5.28.2

Severity

annoyance

[ieedan]

I think you should be using a combobox here

[vladshcherbin]

I think you should be using a combobox here

Exactly

[leonardodipace]

Thanks for the suggestion!
Either way, is Select.Content supposed to block input fields? I noticed that only happens when Select is inside a Dialog, so I suppose that might be a bug

[huntabyte]

is Select.Content supposed to block input fields?

At the moment, yes, because anything within Select.Content is inside of a role="listbox". The listbox container is specifically designed to hold role="option" elements (or role="group" elements containing options).

However, what you're looking to do is part of a feature I am planning to add in a non-breaking fashion that would enable the capability you're looking for while not violating every ARIA rule in the book.