Comments (14)
Also, on another note, is there a reason why we need to pass:
type SelectOption<T> = {
value: T;
label?: string
}
to the selected
prop, as opposed to just a string
value?
This seems odd to me because
- What purpose would the label serve in this situation?
- It strays away from the native Select where you just pass a straight value.
It's not a huge deal but it does (unless I am missing an easy way), prevent me from binding selected
to a single writable store String
, since it is now an object.
I'm sure there could be reasons for this so I don't want to sound rude!
from bits-ui.
On a possibly related note, <Select.Input name="favoriteFruit" />
doesn't appear to work, the value of the hidden input field is set to "[object Object]"
. It used to be set to the option.value
automatically.
from bits-ui.
On a possibly related note,
<Select.Input name="favoriteFruit" />
doesn't appear to work, the value of the hidden input field is set to"[object Object]"
. It used to be set to theoption.value
automatically.
Also having this issue atm with Superforms. If anyone has a solution that would be pretty cool in the meantime.
from bits-ui.
^ @saturnonearth that is correct. We had issues with SSR & attempting to keep the select label/value combo in sync, especially when you're conditionally rendering the options under an {#if open}
(which we're doing in bits to support transitions).
I'm working on trying to fix the issues you all are experiencing though!
from bits-ui.
+1 Ohh this is bothering me too, great that you confirmed this!
I am using raw melt-ui
though, that would need to be fixed there I assume.
from bits-ui.
@mcmxcdev , I believe I know why this is happening, if you wouldn't mind opening an issue on Melt explaining some situations that you've run into this, it would be incredible!
from bits-ui.
I believe I may have fixed this, can you confirm using the latest version of bits-ui
?
from bits-ui.
I believe I may have fixed this, can you confirm using the latest version of
bits-ui
?
It seems to work but...it's not liking the new prop: selected
.
Type 'string' is not assignable to type 'SelectOption<unknown>'
I am just passing a Store with a string in it.
Also, should it be onSelectChange
instead of onSelectedChange
to match melt-ui?
from bits-ui.
Yeah it should be onSelectedChange
I will make that fix! So SelectOption
looks like this:
type SelectOption<T> = {
value: T;
label?: string
}
So you'd need to set the value to that string!
from bits-ui.
I was wondering, is the default value that displays in the Select always supposed to be the placeholder, even if the selected
value matches one of the Options? This seems to go against the native Select behavior, but I wasn't sure if this was intentional or not.
As an example...
If the user has the value "apple" value already selected when loading the page, one would assume the Select
shows this:
from bits-ui.
I think that was also an issue I had with Select
, the label was not synced up with the value.
from bits-ui.
In regards to....
I was wondering, is the default value that displays in the Select always supposed to be the placeholder, even if the
selected
value matches one of the Options? This seems to go against the native Select behavior, but I wasn't sure if this was intentional or not.
and....
I think that was also an issue I had with
Select
, the label was not synced up with the value.
I found the reason for this behavior. Basically whatever the selected
label is:
type SelectOption<T> = {
value: T;
label?: string
}
will show up as the default label (even if the value
is set to the correct associated item
.
If there is no label
property present for selected
, it will default to the Select.Trigger
Select.Value
placeholder value.
from bits-ui.
Yeah it should be
onSelectedChange
I will make that fix! SoSelectOption
looks like this:type SelectOption<T> = { value: T; label?: string }So you'd need to set the value to that string!
I don't get typing for the SelectOption
in my onSelectedChange
function.
(property) selected?: SelectOption<unknown> | undefined
I'm doing something like this to make a select component that I can reuse in my app, built on the blocks that shadcn gives me. Which in turn uses bits ui.
<script lang="ts">
import * as Select from '$components/ui/select';
import type { SelectOption } from '@melt-ui/svelte';
import type { OnChangeFn } from 'bits-ui/dist/internal';
export let data: Record<string, string>[];
export let inputName: string;
export let onSelectedChange: OnChangeFn<SelectOption<any> | undefined> | undefined;
export let defaultSelected: SelectOption<string>;
</script>
<Select.Root
selected={{ value: defaultSelected.value, label: defaultSelected.label }}
{onSelectedChange}
>
<Select.Trigger class="w-[180px]">
<Select.Value />
</Select.Trigger>
<Select.Content>
{#each data as { value, label }}
<Select.Item {value} {label}>{label}</Select.Item>
{/each}
</Select.Content>
<Select.Input name={inputName} />
</Select.Root>
The select primitive from shadcn
<script lang="ts">
import { Select as SelectPrimitive } from 'bits-ui';
type $$Props = SelectPrimitive.Props;
export let selected: $$Props['selected'] = undefined;
export let open: $$Props['open'] = undefined;
</script>
<SelectPrimitive.Root bind:selected bind:open {...$$restProps}>
<slot />
</SelectPrimitive.Root>
Atm it's set to any, but I'd like it to set to the type of the selected
. If I understand correctly that should be the case. I'm using bits and shadcn.
export let onSelectedChange: OnChangeFn<SelectOption<any> | undefined> | undefined;
from bits-ui.
Closed by #184
from bits-ui.
Related Issues (20)
- `DropdownMenu.ContentProps` is typed as `any`
- Type errors when using `exactOptionalPropertyTypes`
- Svelte 5 reports plenty of a11y violations coming from bits-ui HOT 3
- Slider RTL Support not working
- DropdownMenu.Item disabled prop does not work as expected
- Fade-In and Fade-Out on Scroll Area Thumb
- [[email protected]] Menubar Trigger is broken: `Cannot destructure property 'builders' of 'getCtx$c(...)' as it is undefined.` HOT 2
- Setting Accordion's value to undefined does not collapse all HOT 2
- Setting Accordion's value to undefined does not collapse all
- Disabled property of Menubar item is not reactive
- [Svelte 5] Form controls that bind `attrs` from `Form.Control` have broken event handlers. HOT 2
- Select component submits "undefined" as a string instead of undefined primitive HOT 1
- ScrollArea.ScrollBar missing in firefox HOT 7
- Double click needed to click out of the combobox to focus an input element
- `Select.ContentProps` is typed as `any`
- Add mousedown / mouseup events to relevant bits. HOT 1
- Dialog outTransition, outTransitionConfig causes data-melt-scroll-lock not to be destroyed
- Tooltip double-rendering with svelte 5.0.0-next.140 HOT 3
- Combobox: Custom current value display
- Multiple context menu and closeOnOutsideClick not working correctly
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bits-ui.