Select.Input defaults to the string value "undefined"

[tylergannon]

Describe the bug

See the demo repo. The demo is in the root route. When user makes no selection in a Select control and then posts the form, the Select.Input hidden input will post the string value "undefined".

I'd like to suggest that the appropriate thing would be to post empty string or else omit the hidden input from the form post.

If this is by design, it might be good to denote it as such in the docs so that authors using this control know what to test for in their form action backend code.

Reproduction

1. Clone the demo repo https://github.com/tylergannon/shadcn-select-empty-value and start up the dev server.
2. Navigate to the root route.
3. Click the submit button without making a selection in the select control.

Expect: An empty string or no value to be submitted.
Actual: The string value "undefined" will be submitted.

Logs

No response

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1
    Memory: 33.09 MB / 16.00 GB
    Shell: 3.7.0 - /opt/homebrew/bin/fish
  Binaries:
    Node: 21.6.2 - /opt/homebrew/bin/node
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm
    bun: 1.0.29 - /opt/homebrew/bin/bun
  Browsers:
    Safari: 17.2.1
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.5.2
    bits-ui: ^0.18.3 => 0.18.3
    svelte: ^4.2.7 => 4.2.12

Severity

annoyance

[emilkjuka]

For now I have found a workaround this. I basically create a emptySelection object const emptySelection={value: '', label:''}
and pass it as selected inside the Root of the select element.
With this my zod validation works but you need to also specify the min function to check for a value of >1. Then it will show your validation message as well.

[huntabyte]

Closing as fixed in bits-ui@next