search

carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.71k stars 261 forks source link

Combobox filter clear on open #1635

Open tbone587 opened 1 year ago

tbone587 commented 1 year ago

I am not sure if this is proper place to file questions, but I will give it a try. It currently doesn't seem possible to have the ComboBox clear when you open the dropdown and filtering is enabled. Once an item has been selected, u must clear, then open to see the other items again. It would be nice if there was the ability to have it clear the filter when you open so u can easily pick a new item. I am going to review the source code and see if there is some way to implement my desired behavior, but if anyone has any ideas please let me know!

tbone587 commented 1 year ago

I was able to effectively copy and paste the source code into my own component and make the necessary changes. Maybe ill submit a PR so other people can enjoy.

theetrain commented 1 year ago

By filtering do you mean typing in some text, or a selected filter as seen in the MultiSelect component?

To articulate the UX you're describing another way:

Given there is a Combobox When the user types in some characters Then the dropdown opens with some visible filtered items

If so, then this seems to counter the usage guidelines for Dropdowns and Comboboxes. See the usage guideline for more details, and try the React Combobox to see how the experience should feel. If carbon-components-svelte is not following the usage guidelines or patterns, then there is a bug. Please let us know if that's the case.

If you're suggesting a new feature, I recommend attaching a video demonstrating your forked component and submitting a new ticket in the carbon repository for consideration.

tbone587 commented 1 year ago

I wrote two given when then sequences to indicate the actual behavior vs my desired behavior. I don't know if it's within spec of the carbon design system, I just personally prefer this behavior and did make a slight change to make it behave that way.

https://user-images.githubusercontent.com/14092187/213929275-3a3a38bf-5d9e-4721-bd1e-67f955977c47.mov

Actual behavior

Given there is a Combobox When shouldFilterItem is overridden and a user types in a value Then the dropdown is properly filtered based on the matches and you can selected the item.
Then the user hits the open button and it only shows the selected item in the list, forcing you to clear the selection with the clear button, or deleting the value to pick a new selection.

Desired behavior

Given there is a Combobox When shouldFilterItem is overridden and a user types in a value Then the dropdown is properly filtered based on the matches and you can selected the item.
Then the user hits the open button and it shows all items to select from or u can refilter as necessary. If you click outside before making a change, the previo

us value is maintained.

theetrain commented 1 year ago

Thanks for the helpful video! I understand your proposal and although I personally agree with it, it may require some research in the flagship Carbon repository. You can corroborate the spec by checking with https://carbondesignsystem.com/components/dropdown/usage/ and the flagship React library.

From what I gather:

Maybe an audit needs to happen to get both component libraries aligned; I opened a ticket to get us started: https://github.com/carbon-design-system/carbon/issues/13026