ComboBox: Force ListBox to be open

[austincrim]

I'm trying to build a CMD + K-like interface using a ComboBox inside of a Dialog. I want the ListBox options to always be visible, regardless if the Input has been typed in or manually focused (using the ComboBox menuTrigger prop).

I couldn't find a way to do this in the docs. Any recommendations?

Here's how it looks now, but I want the list of options to be visible as soon as the dialog is opened.

Stackblitz link

CleanShot.2023-11-22.at.15.14.50.mp4

As an aside, the React Spectrum support page still links to creating a new GitHub Issue, when it looks like you've switched to Discussions.

[snowystinger]

Usually adding autoFocus to the input would be sufficient to handle this. However, I can see it's not working here, based off your stackblitz https://stackblitz.com/edit/stackblitz-starters-zwhkmg?file=src%2FApp.tsx
Will need to look into this more.

[LFDanLu]

@snowystinger and I just looked into this a bit, it seems that the ComboBox's list of items isn't available at the time it focus is automatically placed on the input (we need two renders in the RAC collection implementation to generate the list of items). Ideally, we'd work around this by deferring the focus open logic till the collection is available OR we'd provide the option to turn on the allowsEmptyCollection option for useComboBoxState (we do this automatically for async comboboxes in React Spectrum land). Alternatively, perhaps we could render the Modal and its contents in a hidden way so we can already have the collections generated (feels expensive potentially)? For now, you can skip using the autoFocus prop and instead manually focus the combobox input after a small delay after the modal mounts. I'll convert this to an issue as well.

As an aside, I also noticed that you can't close the modal with cmd+k once you are in the combobox because we automatically stop propagation for keyboard events so you'll want your window level keydown handler to be capturing. Thanks also for noting the outdated copy for the support page, I'll go ahead and update that.

[austincrim]

Thanks for the quick turnaround! I'll implement the focus after delay workaround.

And thanks for the event capture tip ✅.

[BrianHung]

Encountered this problem in May 2024, v1.2 of react-aria.

Workaround is to manually do an autofocus. Don't know if this is the best way.

<Input
	ref={ref => ref && requestAnimationFrame(() => ref.focus())}
/>

[Spriithy]

Hey ! having the same ambitions here, without need to reprogram an always-open ComboBox. Is it achievable with a SearchField coupled to a controlled ListBox ?
Thanks in advance if there are any plans on implementing this kind of behavior !

[LFDanLu]

See #5464 (comment), at the moment we don't have any plans on implementing this kind of behavior. I'm uncertain as to what accessibility pattern this should follow to be honest (should it still be considered a combobox if the listbox is always available and not within a overlay?) so there would need to be some additional research there.

[LFDanLu]

Chiming in that this experience is now supported via the Autocomplete component in React Aria Components:
https://react-spectrum.adobe.com/react-aria/Autocomplete.html#example
https://react-spectrum.adobe.com/react-aria/examples/command-palette.html