Spreading `form.fields.foo.as("select")` onto a `Select` component does not work

[Stadly]

Describe the bug

This does not work. Changing the value in the Select component does not update createForm.fields.foo.value().

  <Select.Root {...createForm.fields.foo.as("select")} type="single">
    <Select.Trigger>
      {createForm.fields.foo.value()}
    </Select.Trigger>
    <Select.Content>
      <Select.Item value="1">1</Select.Item>
      <Select.Item value="2">2</Select.Item>
      <Select.Item value="3">3</Select.Item>
    </Select.Content>
  </Select.Root>

Maybe it's because bind is not being used on value, but why then does <select {...createForm.fields.foo.as("select")}> work without bind? If bind is required for function bindings to work on components (but not elements?), maybe Svelte should emit a warning or error when providing a getter and setter without using bind?

Reproduction

https://stackblitz.com/edit/github-fpvwzt8d?file=src%2Froutes%2F%2Bpage.svelte

Logs

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 22.22.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm

Severity

annoyance

Additional Information

No response

[akawahuynh]

@Stadly
I think this problem isn't with the remote function, but rather with the base of the Select component.
By default, shadcn-svelte's select function wraps around bit-ui, and bit-ui uses a single input to represent it. You can see it here: https://github.com/huntabyte/bits-ui/blob/788fc03ee6a961f30222913c71800920c6b44a50/packages/bits-ui/src/lib/bits/select/components/select.svelte#L91

If you need the exact functionality, I think you should use native-select

[Stadly]

Thanks @akawahuynh. It might be that the issue can be solved in Bits UI, but since this works:

  <Select.Root
    name={createForm.fields.foo.as("select").name}
    type="single"
    bind:value={
      () => createForm.fields.foo.value(),
      (v: string) => createForm.fields.foo.set(v)
    }
  >

I find it surprising that this does not:

  <Select.Root {...createForm.fields.foo.as("select")} type="single">

createForm.fields.foo.as("select").value is a getter and a setter that I think should work the same way as the ones in the first example.

[akawahuynh]

<Select.Root
name={createForm.fields.foo.as("select").name}
type="single"
bind:value={
() => createForm.fields.foo.value(),
(v: string) => createForm.fields.foo.set(v)
}

In this example, we are directly adding a value, so it's guaranteed to work.

but with

<Select.Root {...createForm.fields.foo.as("select")} type="single">

Its base is an input, so it definitely won't work. read core

[Stadly]

Looking at the SvelteKit code, I don't think there is anything Bits UI can do to make <Select.Root {...createForm.fields.foo.as("select")} type="single"> work. The change must be on the SvelteKit side to allow spreading onto components and not just select elements.