Controllable open state for combobox

[hayes]

🙋 Feature Request

Currently the comobobox state implements the popover trigger interface, but does not accept props to control the open state of that state

🤔 Expected Behavior

passing defaultOpen or isOpen props to useComboBoxState should control open state of the combobox

😯 Current Behavior

defaultOpen and isOpen can not be passed

💁 Possible Solution

🔦 Context

💻 Examples

🧢 Your Company/Team

🎁 Tracking Ticket (optional)

[LFDanLu]

We had initially tried to add isOpen and defaultOpen to useComboBox but it introduced a lot of complexity within the hook logic and made the change handlers very tricky to write if users wanted to control open state alongside the selected key and input value (see #1927). We were considering adding a way for users to imperatively open/close the combobox menu, would that work for you?

[hayes]

it's slightly unfortunate as we want to have a consistent API between combo boxes and selects, which do support controlling their open state. We could probably work around it with an imperative API.

[LFDanLu]

@hayes Mind sharing your use case for a controlled open state for ComboBox? The team was curious when looking at this issue during grooming this morning.

[hayes]

The main use case is for storybook or other examples of the components. Being able to render components directly in various states is useful for screenshot diffs and testing. We ended up not implementing an actual controlled open state, but did add a defaultOpen option in our components.

[frontsideair]

I'm also looking for this right now. My use case is to build a composer similar to GitHub comment box, where you can tag things with # character using a listbox. The default open state management doesn't work and I have to run through hoops to make it work, possibly incorrectly.

What I want is to have the listbox open when trigger key is pressed or cursor is at the position following it. Pressing arrow down shouldn't open the listbox. I'm also open to suggestions without API changes.

[IonelLupu]

Looking a way to control the <CombBox> too.

We are trying to build a ComboBox that renders a Popover on desktop and a modal (fullscreen) on mobile. Here is a video showcasing this feature using a MenuTrigger and Popover.

Screen.Recording.2024-01-05.at.15.17.02.mov

We can't get the same functionality using a ComboBox because we can't control the ComboBox open state as we do with MenuTrigger

PS: the docs are still showing the isOpen props https://react-spectrum.adobe.com/react-aria/ComboBox.html

[snowystinger]

@IonelLupu the video you're showing looks very much like a date range picker, not a combobox. Could you see if that works for your use case? https://react-spectrum.adobe.com/react-aria/DateRangePicker.html

[IonelLupu]

@snowystinger the contents are not relevant. We can have anything in there. Here is an example where we have something different:

Screen.Recording.2024-01-06.at.08.49.28.mov

Both of these videos showcase a MenuTrigger with a Popover on desktop size screens and a Modal on mobile size screens. I am able to switch between them by controlling the isOpen property on MenuTrigger and ModalOverlay.

PS: I can also use a DialogTrigger instead of MenuTrigger and it will work the same.

But, I can't do the same behaviour with a Combobox because it doesn't have an isOpen property. Only the Popover has it and using it there doesn't yield the same result. The modal jumps in and out in quick flashes.

I found a fix today: display the ComboBox on desktop; on mobile, hide the ComboBox and show the Modal. It doesn't have the same nice effect of switching between the two like in this videos because when you try to click outside, the ComboBox closes, but that effect is just for showoff and not needed. 😄 I am ok with my solution.

[snowystinger]

I see, the combobox is the city field.
I might suggest having a look at how we handle it in Adobe's design system. It's very close to what you've described.

https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#combobox