Select-Only Combobox

[ashleyryan]

We have a popup listbox component to allow customers to select options. We implemented it with usePopover and useListbox, using useSelect's implementation for reference. We didn't use useSelect directly because we needed multi-select.

We've recently been undergoing an Accessibility audit, and our auditors have said that semantically, this widge/component is a Combobox and needs to be implemented as such (primarily keeping focus on the button and using active-descendant). W3C has a pattern for this on their website: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

I have been able to mostly get it working by applying the inputProps that would typically go on an input to a button instead and removing some text input-specific props. However, after I select a value, it treats the selected value as if it's the value of the text input and filters the items, resulting in only showing in the dropdown. Is there any way to disable filtering without having to fully control the component? (edit: adding a defaultFilter: () => true seems to do the trick. Any other pitfalls you can think of with this approach?

https://codesandbox.io/p/sandbox/divine-cache-2jvhng?file=%2Fsrc%2FApp.tsx

[ashleyryan]

Actually, we completely lose multiselect with this approach because useComboboxState doesn't support it. This is not turning into more of a feature or support issue than a discussion, apologies.

I think I can mostly get this working with our current implementation. The big problem I'm running into is that our current implementation moves focus into the listbox when the popover opens, and I need to keep the focus on the trigger button and use aria-activedescendent

[snowystinger]

Can you use the new Autocomplete https://react-spectrum.adobe.com/react-aria/Autocomplete.html#autocomplete to handle this?
Focus will stay in the input and virtually control it in the ListBox which should be able to do multiple selection.