jpmorganchase / salt-ds

React UI components built with a focus on accessibility, customisation and ease-of-use
https://www.saltdesignsystem.com
Apache License 2.0
111 stars 78 forks source link

Combo Box Enhancement for loading state #3305

Open zeenatbaig opened 2 months ago

zeenatbaig commented 2 months ago

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?

origami-z commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

![Uploading autosuggest2.JPG…]()

zeenatbaig commented 2 months ago

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 commented 2 months ago

You can manually control Combo Box list via open

zeenatbaig commented 2 months ago

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

zeenatbaig commented 2 months ago

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

zeenatbaig commented 2 months ago

Hi, Is there any update on this component ?

joshwooding commented 2 months ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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.