Combo Box Enhancement for loading state

[zeenatbaig]

Area

UI Components

The problem

We are currently using the combo box for our application. The option list is populated based on an API search after the user types in data. In the current functionality of the Salt combo box, the user uses an arrow to view the options. However for our use case, the options would be empty since nothing has been searched. This would not work for our users.

The solution

Can we get an enhancement that would allow us to remove the arrow in the combo box component. An alternative would be a new component that would show options when the API is called after a user does a search.

Alternatives and examples

We currently have added a loader while the search is being done.

Are you a JPMorgan Chase & Co. employee?

• [X] I am an employee of JPMorgan Chase & Co.

[origami-z]

What's the ideal UX around this? e.g., not allowing user to type at all when loading? Showing loading spinner during partial search? Show loading message in the dropdown? Can you share more about the user journey?

[zeenatbaig]

the user should be able to keep typing. They usually are searching a name or SID. As they are typing options show based on what they search. The spinner shows to let the user know that the call is being made

[zeenatbaig]

[zeenatbaig]

One of the main enhancements would be the options should show up automatically. The user should not have to click the arrow to see the dropdown.

[origami-z]

You can manually control Combo Box list via open

[zeenatbaig]

we also don't want users clicking on the arrow and expecting results.

[zeenatbaig]

Would we be able to update the current combo box component without the arrow on the side.

[zeenatbaig]

Hi, Is there any update on this component ?

[joshwooding]

Hi, Is there any update on this component ?

Hi, we're currently triaging this issue and will get back to you shortly. Thank you for your patience.

[vaishnavibekkam]

Hi, Is there any update on this issue ? like Zeenat said for our use case , option list will be provided from an api call , so its not required for our users to click on dropdown to see the list. Is there no prop to hide the arrow ?

[origami-z]

Hi,

Is there any update on this issue ? like Zeenat said for our use case , option list will be provided from an api call , so its not required for our users to click on dropdown to see the list.

Is there no prop to hide the arrow ?

You can control the combobox to show list, can you elaborate your use case more? Is it actually the issue of the chevron button, or something else?

[joshwooding]

Hi, Is there any update on this issue ? like Zeenat said for our use case , option list will be provided from an api call , so its not required for our users to click on dropdown to see the list. Is there no prop to hide the arrow ?

Have you looked at our server side data example?

[vaishnavibekkam]

Hi, Is there any update on this issue ? like Zeenat said for our use case , option list will be provided from an api call , so its not required for our users to click on dropdown to see the list. Is there no prop to hide the arrow ?

You can control the combobox to show list, can you elaborate your use case more? Is it actually the issue of the chevron button, or something else?

Yes our product wants the design to be consistent with old ui toolkit design and hide the chevron icon.

[origami-z]

Yes our product wants the design to be consistent with old ui toolkit design and hide the chevron icon.

This isn't a good reason for changing it, given your product will be different than everyone else. Need some reason why the new pattern doesn't work.

[joshwooding]

@zeenatbaig We've updated combobox's behaviour around this. You can see it in the site example: https://www.saltdesignsystem.com/salt/components/combo-box/examples#server-side-data.

I'll close this for now but let me know if you have any other feedback. Thanks!