search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.72k stars 1.09k forks source link

ComboBox doesn't open when `onInputChange` updates items asynchronously #6638

Closed bmingles closed 2 months ago

bmingles commented 3 months ago

Provide a general summary of the issue here

By default, ComboBox opens when the user types unless there are no items. In cases where the onInputChange event is used to filter the items array asynchronously (e.g. if a search debounce is introduced), the ComboBox doesn't always open when the items have updated. Specifically if the items array changes from empty to populated, the CombBox remains closed after the user types the last character even if there is a match to be shown.

🤔 Expected Behavior?

When ComboBox is configured to open as user types, it should be able to respond to async items array updates.

😯 Current Behavior

ComboBox remains closed after async items update.

💁 Possible Solution

It could be helpful if there were some way to explicitly open the ComboBox after an async change is applied to the items array. Possibly exposing an isOpen prop to make it controlled.

🔦 Context

We need this feature in order to support debounced filtering of items in response to user input.

🖥️ Steps to Reproduce

Instructions in the comment header of App.tsx in this codesandbox https://codesandbox.io/p/sandbox/spectrum-combobox-not-opening-x29g3n

Version

3.35.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

LFDanLu commented 2 months ago

I believe this is similar to via https://github.com/adobe/react-spectrum/issues/5234. Ideally there would be support for a controlled isOpen prop and/or handling this case automatically in useComboBoxState, but finagling the internal open state logic has proved to be quite difficult. I'll close this in favor of the other issue, feel free to reopen if that issue doesn't sufficiently cover your case.

As an aside, I'm beginning to think exposing the combobox's state's open on the combobox ref might be the best intermediate fix in the short term so at least users have a way to open the combobox when needed. https://github.com/adobe/react-spectrum/blob/81abb2185cb3a9c52a8feaf76a136c64852aea13/packages/%40react-spectrum/textfield/src/TextFieldBase.tsx#L66-L76 is an example of how we've created a similar imperative interface in Textfield