search

rob-balfre / svelte-select

Svelte Select. A select component for Svelte
https://svelte-select-examples.vercel.app
Other
1.25k stars 175 forks source link

Feature: show placeholder when focused #587

Closed jeanbmar closed 1 year ago

jeanbmar commented 1 year ago

Thanks for the great component.

I have a single select, with search enabled, that always has a selected value. As a result the placeholder is never shown. It would be nice to be able to show the placeholder, by hiding the selected item, when the select has focus and the search input is empty. When using a a custom loadOptions prop, I would be able to communicate with the user about what's expected in the search input.

Such a feature could use a new placeholderShowOnFocus, and could probably by achieved by changing https://github.com/rob-balfre/svelte-select/blob/976bf3e0c5e9a38a1339b35767c85e755c6ee1e9/src/lib/Select.svelte#L260

and

https://github.com/rob-balfre/svelte-select/blob/976bf3e0c5e9a38a1339b35767c85e755c6ee1e9/src/lib/Select.svelte#L262-L269

The option would apply to single select with or without search enabled.

What's your opinion about this?

rob-balfre commented 1 year ago

@jeanbmar using named slots might be alternative to adding more props...

https://svelte.dev/repl/12ed2222d64f493aaa9d12d80f07475f?version=3.58.0

jeanbmar commented 1 year ago

Thank you, that's a decent workaround but it involves restyling the selection to behave like the placeholder. I'll probably go for some monkey patching then.