[solidStart] Select component + form, how to get selected items?

[pgswow]

Hello!

import { action, useSubmission } from "@solidjs/router";
import { Index, Portal } from "solid-js/web";
import { Select } from "@ark-ui/solid";
import { ChevronsUpDown } from "lucide-solid";

const post = action((formData) => {
  "use server";
  console.log(formData);
}, "post");

export default function Home() {
  const items = ["React", "Solid", "Vue"];
  // const Post = useSubmission(post);
  return (
    <main class="text-center mx-auto text-gray-700 p-4">
      <form action={post} method="post">
        <Select.Root items={items} name="fw">
          <Select.Control>
            <Select.Trigger class="flex border">
              <Select.ValueText placeholder="Select a Framework" />
              <Select.Indicator>
                <ChevronsUpDown stroke-width={1} class="w-5 h-5" />
              </Select.Indicator>
            </Select.Trigger>
          </Select.Control>
          <Portal>
            <Select.Positioner>
              <Select.Content>
                <Select.ItemGroup>
                  <Index each={items}>
                    {(item) => (
                      <Select.Item item={item()} class="flex">
                        <Select.ItemText>{item()}</Select.ItemText>
                        <Select.ItemIndicator>+</Select.ItemIndicator>
                      </Select.Item>
                    )}
                  </Index>
                </Select.ItemGroup>
              </Select.Content>
            </Select.Positioner>
          </Portal>
          <Select.HiddenSelect />
        </Select.Root>
        <input type="text" name="txt" value={"txt"} class="border" />
        <button class="border">Send</button>
      </form>
    </main>
  );
}

When selecting a value and submitting the form, I only see the value from the input, how can I get the selected value from the select?

[segunadebayo]

Please create a proper reproduction to get help

[pgswow]

Hello! reproduction here: https://stackblitz.com/edit/github-ku6ba6?file=src%2Froutes%2Findex.tsx
please help me =)

[pgswow]

I also want to clarify that with other components there are no problems with receiving values ​​in the form

[karasavm]

@segunadebayo I have the same question.

The "question" is.

On a form submit, we can get an <Input/> value by accessing the formData.get('inputFieldName').
How we can achieve this on a Select component?

I managed to get the value using the <Select.HiddenSelect/> BUT the value I get by accessing formData.get('selectValueName')
is always the fist option's value on the select box

Here is a reproduction

Please select the second or the third value on the select box then submit and you will see that always the first one is selected.!

Thank you in advance!

[karasavm]

@segunadebayo AND @pgswow

Finally I found the reason the problem of not getting the correct value on formData.get('selectValueName')
It is wrong to set id="selectValue" on Select.HiddenSelect, some how if you set it, it breaks the behavior.

<Select.HiddenSelect name="selectValue" id="selectValue" />

{/* ******* FIX ******* */}
{/* <Select.HiddenSelect name="selectValue" /> */}

So, @segunadebayo what it the correct way of handling id on select? Is that a bug or this is the correct behaviour and why?

[karasavm]

Hello!

import { action, useSubmission } from "@solidjs/router";
import { Index, Portal } from "solid-js/web";
import { Select } from "@ark-ui/solid";
import { ChevronsUpDown } from "lucide-solid";

const post = action((formData) => {
  "use server";
  console.log(formData);
}, "post");

export default function Home() {
  const items = ["React", "Solid", "Vue"];
  // const Post = useSubmission(post);
  return (
    <main class="text-center mx-auto text-gray-700 p-4">
      <form action={post} method="post">
        <Select.Root items={items} name="fw">
          <Select.Control>
            <Select.Trigger class="flex border">
              <Select.ValueText placeholder="Select a Framework" />
              <Select.Indicator>
                <ChevronsUpDown stroke-width={1} class="w-5 h-5" />
              </Select.Indicator>
            </Select.Trigger>
          </Select.Control>
          <Portal>
            <Select.Positioner>
              <Select.Content>
                <Select.ItemGroup>
                  <Index each={items}>
                    {(item) => (
                      <Select.Item item={item()} class="flex">
                        <Select.ItemText>{item()}</Select.ItemText>
                        <Select.ItemIndicator>+</Select.ItemIndicator>
                      </Select.Item>
                    )}
                  </Index>
                </Select.ItemGroup>
              </Select.Content>
            </Select.Positioner>
          </Portal>
          <Select.HiddenSelect />
        </Select.Root>
        <input type="text" name="txt" value={"txt"} class="border" />
        <button class="border">Send</button>
      </form>
    </main>
  );
}

When selecting a value and submitting the form, I only see the value from the input, how can I get the selected value from the select?

Here is the solution you are looking for.

"use client";
import { Select } from "@/components/ui/select";

export const FormUpdate = () => {
  const items = ["React", "Solid", "Vue"];

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        const formData = new FormData(e.target as HTMLFormElement);
        for (const pair of formData.entries()) {
          console.log(pair[0], pair[1]);
        }
      }}
    >
      <Select.Root items={items}>
        <Select.Label>Framework</Select.Label>
        <Select.HiddenSelect name="selectFieldName" />
        <Select.Control>
          <Select.Trigger>
            <Select.ValueText placeholder="Select a Framework" />
            <Select.Indicator>
              <ChevronDownIcon />
            </Select.Indicator>
          </Select.Trigger>
          <Select.ClearTrigger>Clear</Select.ClearTrigger>
        </Select.Control>
        <Select.Positioner>
          <Select.Content>
            <Select.ItemGroup>
              <Select.ItemGroupLabel>Frameworks</Select.ItemGroupLabel>
              {items.map((item) => (
                <Select.Item key={item} item={item}>
                  <Select.ItemText>{item}</Select.ItemText>
                  <Select.ItemIndicator>✓</Select.ItemIndicator>
                </Select.Item>
              ))}
            </Select.ItemGroup>
          </Select.Content>
        </Select.Positioner>
      </Select.Root>
      <button type="submit">Submit</button>
    </form>
  );
};

[pgswow]

I don’t use TS, unfortunately your implementation doesn’t work in JS, “fw” is output to the console =(