From 5bf7332a4a8326bd61443f3c0cee69b349d5c7bd Mon Sep 17 00:00:00 2001
From: chirokas <vscode.d@gmail.com>
Date: Wed, 6 Nov 2024 16:21:13 +0800
Subject: [PATCH] chore: cleanup

---
 .changeset/quick-buses-kick.md                |  3 +-
 .../select/__tests__/select.test.tsx          | 31 +++++++++++++++++--
 .../src/use-multiselect-state.ts              |  3 +-
 3 files changed, 32 insertions(+), 5 deletions(-)

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"
         >
           <SelectItem key="one">One</SelectItem>
@@ -905,10 +912,28 @@ describe("validationBehavior=native", () => {
       </form>,
     );
 
-    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<T extends {}>(props: MultiSelectProps<T>): M
       if (props.selectionMode === "single") {
         triggerState.close();
       }
+
+      validationState.commitValidation();
     },
   });
 
@@ -101,7 +103,6 @@ export function useMultiSelectState<T extends {}>(props: MultiSelectProps<T>): M
       if (listState.collection.size !== 0) {
         setFocusStrategy(focusStrategy);
         triggerState.toggle();
-        validationState.commitValidation();
       }
     },
     isFocused,