web-client-ui
web-client-ui copied to clipboard
ComboBox - searching items from table data source doesn't always open the picker
When searching for items in a ComboBox backed by a table data source, sometimes the picker opens to show results as you type. Sometimes it does not.
~I've filed a bug with Spectrum to address the root cause: https://github.com/adobe/react-spectrum/issues/6638~
UPDATE 07/11: Spectrum closed my bug ticket in lieu of this one https://github.com/adobe/react-spectrum/issues/5234
Reproduction Steps
Run the below script
Working Scenario
- Before selecting anything in the ComboBox, type
2024very quickly (has to be quick to beat the debounce applying the change) - Should see ComboBox open showing all items for
2024 - Clear the typing
Non-working Scenario
- This time, type
2024slowly so that the filter gets applied before you finish typing. - CombBox is no longer open
- If you backspace the
4, ComboBox will open briefly then close. Typing4again will not re-open the ComboBox - If you backspace the
4and type it again very quickly, it will re-open
from deephaven import empty_table, ui, time_table
import datetime
initial_row_count=5 * 8760 # 5 years
_items = time_table("PT6H", start_time=datetime.datetime.now() - datetime.timedelta(hours=initial_row_count)).update([])
key_column="Timestamp"
@ui.component
def ui_combo_box(items):
value, set_value = ui.use_state()
combo = ui.combo_box(
items,
key_column=key_column,
label_column=key_column,
label=key_column,
on_selection_change=set_value,
selected_key=value,
)
# Show current selection in a ui.text component
text = ui.text("Selection: " + str(value))
return combo, text
my_combo_box = ui_combo_box(_items)
I believe the root cause is the Spectrum ComboBox only shows the popup after the user types and there are items in the source array. Changing from an empty items array to one with data won't open the popup until user types.
Here's the impact of this:
- User types
202which gets applied to the list and results in no matching results due to how our date filter works. - User types
4 - ComboBox still has empty items, so it doesn't open even though user typed
- We apply the filter to jsapi which results in items array containing all 2024 data. This updates the ComboBox, but it doesn't automatically open when items change, only when user types
- User backspaces
4slowly. This flickers for a moment the2024data since it still exists in items, but then202is applied as filter resulting in empty items array. ComboBox rightly closes due to empty data - Typing
4again repeats the issue in step 3. - Backspacing
4and retyping quickly opens because the filter resulting in empty items is never applied, and user has typed while there are still results in items
I'm not sure how to get around this but seems we need a way to force the ComboBox to open if the items array goes from empty to populated as a result of a user key stroke.
Note: Worth mentioning that there are 2 additional menuTrigger modes that change the behavior of the dropdown opening that will need to be accounted for in whatever solution we may find.