Combobox default & filter use case

[seanmateer]

Hi there,

I have a use case for a combobox or select autocomplete interaction that differs slightly from the examples, and am wondering if it's achievable or whether there is a better pattern/component to use as an alternative.

Use Case:
A SG parent (admin) account viewing their email deliverability dashboard sees stats for their parent user by default. The parent needs a way to view/filter an entire list of their subaccounts (they could have 10s or 100s) and select 1 in order to refresh stats data for that account.

A few requirements/constraints:

• A user needs to see which account is selected at all times.
• Not a multi-select use case. Only 1 account at a time.
• A user needs to be able to filter from a preset dropdown list (like clicking the field in the autocomplete example)
• There will always be a default selection (assuming this is possible, but don't see an example under combobox).
• The input should never have null value (perhaps reset to last valid selection if a user were to click out while text is empty/invalid?)

Ultimately I tried mocking something inspired by the useCombobox state hook example, but the x-ing out feels a little unnatural and perhaps more complicated than it needs to be.

An ideal/simpler solution might work more like this first single selection example from Morningstar's design system, except with the ability to set something as the default. What I like about this implementation:

• Can always see full list of results - keeps your prev selection highlighted
• You are "ready to type/filter" immediately - don't need to X anything.
• Saves your last selection if you click away.

Happy to bring this to DSYS office hours as a next step but wanted to see if anyone had immediate ideas for alt solutions or whether this is feasible with the current component.

[TheSisb]

Hi @seanmateer,

You can pass an initial value to the simple combobox with the initialSelectedItem="Octavia Butler" prop.

Curious if you considered using a Select component as well?

[richbachman]

Hi @seanmateer

In reference to your proposed solution, all of this should be possible but at this point we've not tested anything.

From a UX perspective, we agree with your hunch about "x-ing" out. That can probably be dropped. Clicking into the field in order to "clear" the selection, while maintaining the previous selection feels like a good approach.

Engineering will most likely need to use the state hook within Combobox, since that will give them the most control of the combobox functionality. Some parts, like the event handling will be a little tricky. We're happy to help support the engineering team when they're building this.

If you want to chat more about this, feel free to schedule some time in office hours.

[seanmateer]

Thanks both @TheSisb and @richbachman. Open to the same implementation with a Select field if it's easier, though I'm partial to the fancy styling of the combobox :)

As a next step I am going to tag @alfredlucero just to get him up to speed on this discussion and we will follow up in implementation if we have any issues. You can probably resolve this issue in the meantime. Thank you!