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,