diff --git a/.changeset/quick-buses-kick.md b/.changeset/quick-buses-kick.md new file mode 100644 index 0000000000..0ed0c701c0 --- /dev/null +++ b/.changeset/quick-buses-kick.md @@ -0,0 +1,6 @@ +--- +"@nextui-org/select": patch +"@nextui-org/use-aria-multiselect": patch +--- + +Prevent default browser error UI from appearing (#3913). diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx index 6776344eeb..ecc974f825 100644 --- a/packages/components/select/__tests__/select.test.tsx +++ b/packages/components/select/__tests__/select.test.tsx @@ -882,3 +882,58 @@ describe("Select with React Hook Form", () => { expect(onSubmit).toHaveBeenCalledTimes(1); }); }); + +describe("validationBehavior=native", () => { + let user: UserEvent; + + beforeEach(() => { + user = userEvent.setup(); + }); + + it("supports server validation", async () => { + const onSubmit = jest.fn(); + + const {getByTestId} = render( +
, + ); + + const button = getByTestId("button"); + const select = getByTestId("select"); + const input = document.querySelector("[name=select]"); + + expect(input).toHaveAttribute("required"); + expect(select).not.toHaveAttribute("aria-describedby"); + + await user.click(button); + + expect(select).toHaveAttribute("aria-describedby"); + expect(input.validity.valid).toBe(false); + expect(onSubmit).toHaveBeenCalledTimes(0); + + expect(document.activeElement).toBe(select); + + await user.keyboard("[ArrowRight]"); + + expect(select).not.toHaveAttribute("aria-describedby"); + expect(input.validity.valid).toBe(true); + + await user.click(button); + + expect(onSubmit).toHaveBeenCalledTimes(1); + }); +}); diff --git a/packages/components/select/src/hidden-select.tsx b/packages/components/select/src/hidden-select.tsx index d7c74ef43a..9d24dd3949 100644 --- a/packages/components/select/src/hidden-select.tsx +++ b/packages/components/select/src/hidden-select.tsx @@ -92,15 +92,9 @@ export function useHiddenSelect