Pre-filled combobox prevents seeing other items in menu without clearing field

[rosemaryluo]

Hi, it's me again with the same combobox, different issue.
We have a country selector that we enabled search functionality for since it's a pain to scroll through countries
However, we pre-populate this with a detected country e.g. United States
so when someone goes to try to change it, the default behavior of the dropdown is to filter by the input "United States" and not show all the other countries until the input is cleared. This is leading to a <50% success rate at actually selecting a different country.
We started chatting about workarounds, but first I want to confirm whether this is the intended behavior for this component.
Thank you!

[rosemaryluo]

Quick prototype of an alternative we are interested in exploring, so that we can get the countries to show up before deleting the pre-selected input:
https://www.figma.com/proto/rok8UhaMG22Xqck3yanEHX/Verification-and-Ahoy-migration-to-Paste-(2022)?page-id=1173%3A104836&node-id=1241%3A106695&viewport=27%2C47%2C0.37&scaling=min-zoom&starting-point-node-id=1241%3A106695

[gloriliale]

Hi @rosemaryluo! Thanks for the question, I can definitely see this being difficult for a user. Let me consult the team and get back to you with our thoughts!

[rosemaryluo]

@uditadhikari117 I'm looking for similar to #1 but not exactly the behavior you are showing. I would like the full list to show every time the user re-opens the dropdown after making a selection.

Looking to be able to do the following:

• click on dropdown (with pre-fill) - show full list of countries
• click on selection - dropdown closes
• click on dropdown (with new selection) - show full list of countries
• start typing in a new country - show filtered list of countries
• click on a selection - dropdown closes
• click on dropdown (with new selection) - show full list of countries
• (repeatable)

Attempted to recreate this flow in prototype:
https://user-images.githubusercontent.com/87049408/215556848-f5fa3c45-9577-48a4-8253-dfa0057c71be.mov

[uditadhikari117]

Ok after enough hacking I think I have what Rosemary wants. Rosemary please confirm.
https://deploy-preview-3192.console.stage.twilio.com/account/ahoy

gloriliale what complicated this is anytime 'onSelectedItemChange' would run then 'onInputValueChange' would run right after. So, I am making sure that 'onInputValueChange' does not affect filtering when it receives an input that matches exactly one of the values in the list.
The net effect is 'onSelectedItemChange' resets everything to a full list and 'onInputValueChange' then does no additional filtering. I think this is slightly hacky but open to your thoughts on this. However, I refrained from changing anything inside combobox.
PR -> https://github.com/twilio-internal/console/pull/3192/

[gloriliale]

Hi @uditadhikari117! That looks like it works great! I'd say it works for 99% of use cases.

The only catch is that if someone tries to select something that is already selected, which I would estimate is a true edge case (but let me know if I'm mistaken @rosemaryluo!), then onSelectedItemChange won't be triggered so they'll need to clear the field to see the full country list again.

I truly think what you have will work wonderfully! If you want to check out another solution, where we address the rare edge case above, check out this codesandbox that makes use of the useCombobox hook that's also included in the Combobox package. Keep in mind that we warn consumers to proceed with caution using this hook, since it can be easy to break and difficult to debug.

Thanks for reaching out!

[uditadhikari117]

Thank you @gloriliale. I think your solution is great as it removes that edge case. I think the edge case is hard to run into but when one does, it makes the usage of Combo Box a bit confusing. I will push the team towards your solution of using the useCombobox hook. I do have some maintenance concerns as our team is very backend heavy. However, I think it would be good experience for the team to use hooks.

[uditadhikari117]

I do want to spend some time understanding how the useCombobox works. If I have to guess it is using some sort of useReducer hook underneath. In the console zen repository I can only find the interface that the useCombobox hook subscribes to. Could I request the source code of useCombobox hook?