Disable keyboard interaction on ListBox

[SylarRuby]

Hi all. I've added a filter input inside the ListBox so that users can type to filter items. It will be common for them to type then enter "space" but keyboard interaction is causing an issue:

[..]

const filterOptions = (event) => {
  // This has no effect 😢
  event.stopPropagation()

  // code...
}

<Listbox.Options>

  <input
      value={query}
      onChange={filterOptions}
      placeholder="Filter..."
      type="text" 
    />

</Listbox.Options>

[..]

I'd like to prevent the dropdown from closing when the space bar is pressed.

[barbarah]

I have a similar setup. For me, changing the onKeyDown on the input works:

                onKeyDown={(e) => { if (e.code === "Space") { e.stopPropagation(); } }}

This solution does feel a bit hacky. When searching for a solution I did find 3 discussions about the same issue. Non with better (or any) solutions. So there are multiple people running into the same issue with disabling keyboard interaction on space. Related discussions:

• Is there a way to disable open and close menu (dropdown) by space? #773
• Keyboard Accessibility Options #700
• Search item inside a menu #684

[benjaminbarbe]

                  onKeyDown={(e) => { if (e.keyCode === 32) { e.stopPropagation(); } }}

[ADTC]

The same thing happens for Menu's keyboard interaction. Is this onKeyDown hack the only solution?

[ADTC]

@barbarah @benjaminbarbe it seems it's better to always stop propagation, because typing a letter from a-z in the text box will focus an item that begins with the letter, and pressing Space/Enter will select it while you're in the input text box. (That should only happen outside the text box.)

  onKeyDown={(e) => e.stopPropagation()} // prevent conflicts with Headless UI keyboard navigation

[venkat-spendflo]

Worked like a charm in react

[aeksco]

Here's my solution which retains the Headless UI keyboard interactions for navigating the listbox, but allows for an <input> element to to accept a lookup from a user:

<input
    type="search"
    value={value}
    onChange={(e) => {
        onChange(e.currentTarget.value);
    }}
    onKeyDown={(e) => {
        const allowedHeadlessUIKeys = [
            "ArrowUp",
            "ArrowDown",
            "Enter",
            " ", // Space Key
            "Home",
            "End",
            "Escape",
        ];
        if (!allowedHeadlessUIKeys.includes(e.key)) {
            e.stopPropagation();
        }
    }}
/>

Works well enough for now, but would love to see official support for this use case!

[GreenImp]

Could you not just use the Combobox component instead? https://headlessui.com/react/combobox

It provides much the same functionality as the Listbox, but with the ability to search / filter results.

[chekdotdev]

@GreenImp Combobox works for interfaces where you want the "old" selection to go away as you're typing, but for interfaces where the current selection doesn't change until you select something new, it won't work.

Perfect example: GH labels: