diff --git a/.changeset/spotty-spies-call.md b/.changeset/spotty-spies-call.md new file mode 100644 index 0000000000..d7d7ae3f3f --- /dev/null +++ b/.changeset/spotty-spies-call.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/select": patch +--- + +Fix Controlled IsInvalid Prop In Select diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx index 655b06ce81..f970b0c64b 100644 --- a/packages/components/select/__tests__/select.test.tsx +++ b/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 ( + <> + + + + ); + } + + const {getByTestId} = render(); + 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", () => { diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts index 7da2bd7e9b..6fb08a5bce 100644 --- a/packages/components/select/src/use-select.ts +++ b/packages/components/select/src/use-select.ts @@ -241,6 +241,7 @@ export function useSelect(originalProps: UseSelectProps) { children: children as CollectionChildren, isRequired: originalProps.isRequired, isDisabled: originalProps.isDisabled, + isInvalid: originalProps.isInvalid, defaultOpen, onOpenChange: (open) => { onOpenChange?.(open);