Adding <button> to a <ComboBox>/<ListBox / Keeping Popover visible as long as focus is inside of it

[gregoralbrecht]

Hey there 👋 I'm trying to build something that lets people search for an option in a long list of options and click a button to add an option. It's basically what Reach UI has in their examples (called "Lots of arbitrary elements" here)

I've added such a button to one of the examples here: https://codesandbox.io/p/sandbox/romantic-chaum-j88ng3

The markup feels correct to me (i.e., button's outside the listbox). However, as soon as the button receives focus, the popover will close. Which kinda makes sense to me, but I also can't figure out how to best ensure it doesn't happen 🤓

→ How can I keep the popover open while the focus is outside of the listbox but still inside of the popover?

[snowystinger]

You could possibly use links https://react-spectrum.adobe.com/react-aria/ComboBox.html#links
and style that element to look different from the others https://codesandbox.io/p/sandbox/gifted-elbakyan-frn6y2?file=%2Fsrc%2FApp.js%3A39%2C40

[gregoralbrecht]

Thanks for the super-fast answer! I've thought about this, but it seems like the wrong approach for these reasons:

1. The button should be outside the ListBox because a) semantics (not too strong an argument I must admit), b) behavior (the button will get filtered out if I use the default filtering mechanisms)
2. I need the flexibility to make this a link or a button

I will try digging into why the popover closes in the first place but so far, the state is opaque to me. You don't happen to have any idea where I might find something about this?

[gregoralbrecht]

I've just now realized that even if I force it to keep open, tabbing outside of the listbox will count as a "select" command and update the value of the combobox

[snowystinger]

So, the reason I suggested using a link is because then it can be part of the standard keyboard navigation of combobox. You can also always keep it in the visible list by using your own filter on the items.

If you have it outside the standard combobox control's navigation, it becomes inaccessible, as you've found.

What you're describing, I think, is the Dialog Popup Combobox https://www.w3.org/WAI/ARIA/apg/patterns/combobox
Which you might be able to implement with our other hooks/components, however, it's not supported at this time by the Combobox RAC or Combobox hooks.
I suspect it would be a different component if we implemented it because the current Combobox relies on virtual focus in the popover and this would be a very different method of interaction.

A general outline of this would be a text input with the button trigger. Then a Popover with a Listbox which is filtered on the text input. And finally, whatever other non listbox related interactive elements you need in the popover as well.
To get it all working, you'll probably need a couple hooks of your own creation to handle wiring up the text input with the button trigger in a similar manner to our useCombobox and useComboboxState.

You're free to look around in our source code and use what you need.