Open justingolden21 opened 3 weeks ago
I realize I only need
selected={{ value: selectedValue, label: selectedValue }}
onSelectedChange={(value) => (selectedValue = value.value)}
but this is still a lot compared to bind:value={selectedValue}
and since it can be undefined, it's more like
selected={{ value: selectedValue , label: selectedValue }}
onSelectedChange={(value) => {
if (value?.value) selectedValue = value?.value;
}}
Sounds similar to this issue: https://github.com/huntabyte/bits-ui/issues/235
Yep, this is gonna be addressed in the Svelte 5 version. I've always hated using this specific variation of the Select myself in projects, so I understand your pain! Here's a preview of the new Select
for reference https://huntabyte-next.bits-ui.pages.dev/docs/components/select 😃
I'm glad to hear, thanks! Appreciate your hard work!
That new one works great!
Describe the feature in detail (code, mocks, or screenshots encouraged)
To use the select in svelte, it takes a tremendous effort.
It took me and my friend over an HOUR to get a simple select working.
With a normal
<select>
, this is trivial and someone who started programing yesterday could get this:But with bits, this takes a LOT of work:
Specifically, this bit:
This is absurdly complex, whereas in every other component, I could simple do
bind:value={selectedValue}
. These three lines took us an hour. I've been making websites for ten years and working with svelte for three years and my friend who helped me solve this is in a similar boat. We were pulling our hair out. We tried looking at the source code and there's no hint of this. We looked at the docs (https://www.bits-ui.com/docs/components/select) and it just showsitems={themes}
but no way to bind... The API reference hasselected
anditems
andonSelectedChange
and everything else, but it has probably 50 different similar things too.I can't imagine people making a select and not caring about the value within it, so rather than just saying binding is common, I'd go as far as to say that not binding is uncommon. Only in a form would you just have the submit event take care of the form value.
If there's ANY way to improve the DX of this, I'm sure the entire community would greatly appreciate it. I know it's a thankless job working on something like bits, and I've come here (as I'm sure many have) after the recent increase in shadcn users, and I know that creating all the enormous APIs for all these things is rough and
<Select>
has to support a LOT of use cases. I'm sure I'll be told to just use a vanilla HTML<select>
, but I'd really like to use shadcn components and every other component other than this Select has been amazing to work with. It just amazes me that multiple experienced devs could waste an hour on this, and every other component is so simple and well designed and intuitive.The problems are threefold:
Thanks again for listening to my rant here, and I hope there's a solution to this. I have asked around and heard many others mentioning how long they struggled to get a select working. For a component this common and a use case (binding) this common, improving the DX like this would be a huge win for bits imo. Thanks again 😃
What type of pull request would this be?
Enhancement
Provide relevant links or additional information.
No response