[bug]: Shadcn Select component not allowing "pending" from useFormStatus works properly

[jhojantobonm]

Describe the bug

I have added into a form the example of the select component from shadcn website.

When I click the submit button that has the useFormStatus pending state to disable it and show optional text while pending. It doesn't work as expected. pending state is always false and neither the disable nor text work.

If I use the vanilla select and option jsx elements. All works perfectly.

Affected component/components

select

How to reproduce

1. Create a new Next.js project (if you don’t have one already):

npx create-next-app@latest my-app
cd my-app
npm install

2. Install shadcn/ui and its dependencies:

npx shadcn-ui@latest init
npx shadcn-ui@latest add select

3. Set up the form using shadcn/ui's Select component

   Create app/page.tsx and add the following code:

"use client";

import { useFormStatus } from "react-dom";
import { useState } from "react";
import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from "@/components/ui/select";

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending} className="border px-4 py-2">
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Selector() {
  const [value, setValue] = useState("");

  return (
    <Select value={value} onValueChange={setValue} name="selection">
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select an option" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem value="1">Option 1</SelectItem>
          <SelectItem value="2">Option 2</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

export default function MyForm() {
  async function action(data: FormData) {
    "use server";
    console.log("Processing:", data.get("selection"));
    await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate delay
  }

  return (
    <form action={action}>
      <Selector />
      <SubmitButton />
    </form>
  );
}

4. Run the project

npm run dev

Open http://localhost:3000 in your browser.

5. Reproduce the Issue

   Select an option from the shadcn/ui Select component.

   Click the Submit button.

   Expected behavior: The button should disable, and text should change while submission is pending.

   Actual behavior: The pending state remains false, and the button doesn't get disabled or change text.

6. Test with a Vanilla <select> Element

   Replace <Selector /> with:

<select name="selection" className="border p-2">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

Click Submit again.

This time, pending works correctly: the button disables and updates its text.

Codesandbox/StackBlitz link

https://codesandbox.io/p/sandbox/react-17-0-2-boilerplate-forked-zd3hk2

Logs

System Info

Firefox, Chrome, Safari

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues