fix(select): controlled isInvalid prop (#4082)

* fix(select): controlled isInvalid prop

* chore: add changeset

* Merge branch 'beta/release-next' into pr/4082

---------

Co-authored-by: WK Wong <wingkwong.code@gmail.com>

.changeset/spotty-spies-call.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+Fix Controlled IsInvalid Prop In Select

packages/components/select/__tests__/select.test.tsx

@@ -780,6 +780,42 @@ describe("Select", () => {
 
     expect(trigger).toHaveTextContent(labelContent);
   });
+
+  it("should support controlled isInvalid prop", async () => {
+    function Test() {
+      const [isInvalid, setInvalid] = React.useState(false);
+
+      return (
+        <>
+          <Select
+            data-testid="select"
+            errorMessage="Invalid value"
+            isInvalid={isInvalid}
+            label="Test"
+            name="select"
+          >
+            <SelectItem key="one">One</SelectItem>
+            <SelectItem key="two">Two</SelectItem>
+            <SelectItem key="three">Three</SelectItem>
+          </Select>
+          <button data-testid="button" onClick={() => setInvalid((isInvalid) => !isInvalid)}>
+            Click Me
+          </button>
+        </>
+      );
+    }
+
+    const {getByTestId} = render(<Test />);
+    const select = getByTestId("select");
+
+    expect(select).not.toHaveAttribute("aria-describedby");
+
+    await user.click(getByTestId("button"));
+    expect(select).toHaveAttribute("aria-describedby");
+    expect(document.getElementById(select.getAttribute("aria-describedby"))).toHaveTextContent(
+      "Invalid value",
+    );
+  });
 });
 
 describe("Select with React Hook Form", () => {

packages/components/select/src/use-select.ts

@@ -241,6 +241,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     children: children as CollectionChildren<T>,
     isRequired: originalProps.isRequired,
     isDisabled: originalProps.isDisabled,
+    isInvalid: originalProps.isInvalid,
     defaultOpen,
     onOpenChange: (open) => {
       onOpenChange?.(open);