huntabyte / bits-ui

The headless components for Svelte.
https://bits-ui.com
MIT License
953 stars 70 forks source link

Combobox: Custom current value display #561

Open hmnd opened 1 month ago

hmnd commented 1 month ago

Describe the feature in detail (code, mocks, or screenshots encouraged)

The search input is currently tightly coupled to the selected item. When an item is selected, the input is always set to the item's label, causing the list to be filtered by the item's label.

This is undesirable when using the Combobox with an external API, where the user might have selected the wrong item and would expect to still have their search results shown if they re-open the result list. It also results in an extra API call for no reason, every time a selection is made. On top of that, it creates a disconnect between the input's value and the current selection, making it possible for the user to modify the input, with the underlying selection remaining the same.

I would like to have the option of a separate slot for the current value, and a slot for the search input. This way, when the user makes a selection, their search input and results are retained, while the selection is shown. Then, if they click on the current value, their search input and associated results could be displayed again. If the user does not change their selection and blurs away from the combobox, their selection would be shown once again.

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

In this screenshot, I selected Mango, then typed Apple, then clicked away. This creates a state where it looks like I've selected Apple, but Mango is still selected. The input text still reads Apple, even if I click into the field and back away from it.

image