ComboBox without Popover / with always visible list

[DaxGama]

Hi all, I am looking to create a search input linked to listbox, such that the list is always visible - what would be the best way to go?

[reidbarber]

I think there are a few ways you could handle this:

Simple solution 1: Use a ComboBox and set the Popover's isOpen state to true. The downside is that the listbox will still be an overlay (and rendered in a portal), and won't flow with the document as expected.

Simple solution 2: Use a SearchField and a ListBox, where you add an aria-controls attribute to the SearchField that references the ListBox's id. The downside is that keyboard behavior will not be as good since you'll need to tab between the SearchField and Listbox instead of having the integrated arrow key navigation of a ComboBox.

Advanced solution: Use the useCombobox hook and don't render a trigger button and don't put the listbox inside a popover.

[DaxGama]

Thanks @reidbarber I like the Advanced approach as I am virtualizing the list, but I get this error when using ArrowKeys on the input

import.mjs:1365 Uncaught TypeError: Cannot read properties of null (reading 'contains')
at eval (import.mjs:1365:33)
at Array.some ()
at MutationObserver.eval (import.mjs:1365:15)

[reidbarber]

You probably still need to pass in a popoverRef into useComboBox if you're not (It can just be the wrapper of the listbox). If you're already doing that and still having this issue, I would probably need to see a codesandbox example to debug further.

[DaxGama]

Thanks @reidbarber ! That helps, but now I am facing another issue.

When I render items, the search functionality breaks

Snippet

<ComboBox
  label="Favorite Animal | Using Items"
  items={[
    { key: 0, text: "red panda" },
    { key: 1, text: "cat" },
    { key: 2, text: "dog" },
    { key: 3, text: "aardvark" },
    { key: 4, text: "kangaroo" },
    { key: 5, text: "snake" },
  ]}
>
  {(item: any) => <Item key={item.key}>{item.text}</Item>}
</ComboBox>

Code reference
https://codesandbox.io/p/sandbox/sweet-beaver-jh59cx

Error reference
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'focus')

Call Stack
focus
node_modules/@react-aria/utils/dist/import.mjs (315:63)
element
node_modules/@react-aria/focus/dist/import.mjs (51:45)
ref
node_modules/@react-aria/selection/dist/import.mjs (346:119)

[reidbarber]

Maybe try also passing a buttonRef? You can hide the button. Also I also don't think you want to use the listboxRef as the popoverRef. Just add a wrapper around the listbox and use that ref. I'm curious what it's trying to focus. I can't see an error in the sandbox to investigate.

[DaxGama]

Thanks @reidbarber,

It turned out it was a silly mistake, I was using items instead of defaultItems.

[reidbarber]

Nice! I was going to recommend checking that but saw that it was fixed.