fix: ComboBox show all items on open

[bmingles]

DH-18088 & DH-18087: ComboBox now clears search filter when opening the ComboBox unless it is triggered by user input.

Testing

• Typing in a combobox should open it filtered by the search text
• Clicking the dropdown should open the CombBox unfiltered
• Typing while open should filter results

  Note that there seems to be a Spectrum bug that can cause some weird scrolling behavior when typing in an opened ComboBox ComboBox - Scrolls to end of popup when typing adobe/react-spectrum#7573

menu_trigger="focus"

• Clicking search input should open it unfiltered

Here's a script with a few different configurations

import deephaven.ui as ui
from deephaven import time_table
import datetime

# Ticking table with initial row count of 200 that adds a row every second
initial_row_count = 200
_table = time_table(
    "PT1S",
    start_time=datetime.datetime.now() - datetime.timedelta(seconds=initial_row_count),
).update(
    [
        "Int=new Integer(i)",
        "Text=new String(`Display `+i)",
    ]
)

item_list = [ui.item(f"Display {i}") for i in range(1, 201)]


# Basic ComboBox
@ui.component
def ui_combo_box_basic():
    value, set_value = ui.use_state("Display 91")

    return ui.combo_box(
        item_list,
        label=f"Basic ({value})",
        selected_key=value,
        on_change=set_value,
        width="size-3000"
    )


# Uncontrolled ComboBox (Table source)
@ui.component
def ui_combo_box_uncontrolled(table):
    value, set_value = ui.use_state("")

    combo1 = ui.combo_box(
        ui.item_table_source(table, key_column="Text", label_column="Text"),
        default_selected_key="Display 92",
        label=f"Uncontrolled Table Source ({value or 'None'})",
        on_change=set_value,
        width="size-3000"
    )

    return combo1


# Controlled ComboBox (Table source)
@ui.component
def ui_combo_box_controlled(table, menu_trigger):
    value, set_value = ui.use_state("Display 93")

    combo1 = ui.combo_box(
        ui.item_table_source(table, key_column="Text", label_column="Text"),
        selected_key=value,
        label=f"Controlled Table Source ({value}) {menu_trigger or ''}",
        menu_trigger=menu_trigger,
        on_change=set_value,
        width="size-3000"
    )

    btn = ui.button("Set Value", on_press=lambda: set_value("Display 104"))

    return combo1, btn


# Controlled input ComboBox (Table source)
@ui.component
def ui_combo_box_input_controlled(table, menu_trigger):
    input_value, set_input_value = ui.use_state("Display 94")
    value, set_value = ui.use_state("Display 94")

    combo1 = ui.combo_box(
        ui.item_table_source(table, key_column="Text", label_column="Text"),
        input_value=input_value,
        on_input_change=set_input_value,
        default_selected_key=value,
        label=f"Controlled Input Table Source ({value}) {menu_trigger or ''}",
        menu_trigger=menu_trigger,
        on_change=set_value,
        width="size-3000"
    )

    btn = ui.button("Set Input", on_press=lambda: set_input_value("Display 104"))

    return combo1, btn

# Layout
@ui.component
def ui_layout():
    return (
        ui_combo_box_basic(),
        ui_combo_box_uncontrolled(_table), 
        ui_combo_box_controlled(_table, None), 
        ui_combo_box_controlled(_table, "focus"),
        ui_combo_box_input_controlled(_table, None),
    )

tests = ui_layout()

[codecov]

Codecov Report

Attention: Patch coverage is 11.76471% with 15 lines in your changes missing coverage. Please review.

Project coverage is 46.69%. Comparing base (ca5f6cd) to head (733a315).
Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
...ackages/jsapi-components/src/spectrum/ComboBox.tsx	0.00%	15 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2328      +/-   ##
==========================================
- Coverage   46.71%   46.69%   -0.02%     
==========================================
  Files         704      704              
  Lines       39010    39045      +35     
  Branches     9747     9756       +9     
==========================================
+ Hits        18223    18234      +11     
- Misses      20776    20800      +24     
  Partials       11       11              

Flag	Coverage Δ
unit	46.69% <11.76%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[mofojed]

Aside - not our naming, but I was worried this name would conflict with something from the @react-types/menu package. But there they have MenuTriggerType.
I don't know why they didn't call this ComboBoxTriggerType or something instead, but whatever.

[mofojed]

Shouldn't this be set in all cases? Everything else looks good.

[bmingles]

I'm on the fence on this one. My reasoning for only putting it here was that the only consumer should be the menuTrigger === 'input' case in onOpenChange which should only follow this else case. I was trying to conceptually couple them in an attempt to make the code easier to reason about. That said, there's probably not any harm in setting it for all cases, and there could be an edge case that needs it that I'm unaware of. In general, reasoning about the relationship of these 2 functions is a bit of a pain.