diff --git a/.changeset/quick-buses-kick.md b/.changeset/quick-buses-kick.md index b0eff9da88..0ed0c701c0 100644 --- a/.changeset/quick-buses-kick.md +++ b/.changeset/quick-buses-kick.md @@ -1,5 +1,6 @@ --- "@nextui-org/select": patch +"@nextui-org/use-aria-multiselect": patch --- -Prevent default browser error UI from appearing. +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 735a5b38c1..ecc974f825 100644 --- a/packages/components/select/__tests__/select.test.tsx +++ b/packages/components/select/__tests__/select.test.tsx @@ -884,7 +884,13 @@ describe("Select with React Hook Form", () => { }); describe("validationBehavior=native", () => { - it("should not submit form when required field is empty", async () => { + let user: UserEvent; + + beforeEach(() => { + user = userEvent.setup(); + }); + + it("supports server validation", async () => { const onSubmit = jest.fn(); const {getByTestId} = render( @@ -893,6 +899,7 @@ describe("validationBehavior=native", () => { isRequired data-testid="select" label="Test" + name="select" // validationBehavior="native" > One @@ -905,10 +912,28 @@ describe("validationBehavior=native", () => { , ); - const user = userEvent.setup(); + 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(getByTestId("button")); + 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/hooks/use-aria-multiselect/src/use-multiselect-state.ts b/packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts index 8e2d5535c6..a4c371871e 100644 --- a/packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts +++ b/packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts @@ -71,6 +71,8 @@ export function useMultiSelectState(props: MultiSelectProps): M if (props.selectionMode === "single") { triggerState.close(); } + + validationState.commitValidation(); }, }); @@ -101,7 +103,6 @@ export function useMultiSelectState(props: MultiSelectProps): M if (listState.collection.size !== 0) { setFocusStrategy(focusStrategy); triggerState.toggle(); - validationState.commitValidation(); } }, isFocused,