From 11a543cf2496dc93952fb60942cd0365db96a9e0 Mon Sep 17 00:00:00 2001
From: Peterl561 <peter.liu@treelab.com>
Date: Sun, 15 Dec 2024 03:32:38 -0800
Subject: [PATCH 1/4] fix(select): use select missing commitValidation call

---
 packages/components/select/src/use-select.ts                     | 1 +
 packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts
index f4c01d92f6..e563cd1f7d 100644
--- a/packages/components/select/src/use-select.ts
+++ b/packages/components/select/src/use-select.ts
@@ -301,6 +301,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
           },
         } as React.ChangeEvent<HTMLSelectElement>);
       }
+      state.commitValidation();
     },
   });
 
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 d8c14ad820..ea1116ef4e 100644
--- a/packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts
+++ b/packages/hooks/use-aria-multiselect/src/use-multiselect-state.ts
@@ -124,7 +124,6 @@ export function useMultiSelectState<T extends object>({
 
       setFocusStrategy(focusStrategy);
       triggerState.toggle();
-      validationState.commitValidation();
     },
     isFocused,
     setFocused,

From a6833749a4a58efd06cd4c9f837792c400bc8661 Mon Sep 17 00:00:00 2001
From: Peterl561 <peter.liu@treelab.com>
Date: Sat, 21 Dec 2024 16:01:39 -0800
Subject: [PATCH 2/4] fix(select): remove hidden input from hidden-select

---
 apps/docs/content/docs/components/select.mdx  |  1 -
 .../components/select/src/hidden-select.tsx   | 32 ++++---------------
 2 files changed, 7 insertions(+), 26 deletions(-)

diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index 7d05d3190d..165008ad0d 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -376,7 +376,6 @@ the popover and listbox components.
 - Keyboard support for opening the listbox using the arrow keys, including automatically focusing the first or last item accordingly.
 - Typeahead to allow selecting options by typing text, even without opening the listbox.
 - Browser autofill integration via a hidden native `<select>` element.
-- Support for mobile form navigation via software keyboard.
 - Mobile screen reader listbox dismissal support.
 
 <Spacer y={4} />
diff --git a/packages/components/select/src/hidden-select.tsx b/packages/components/select/src/hidden-select.tsx
index dd99ff5646..08d633dfdc 100644
--- a/packages/components/select/src/hidden-select.tsx
+++ b/packages/components/select/src/hidden-select.tsx
@@ -5,7 +5,6 @@
 import {FocusableElement} from "@react-types/shared";
 import React, {ReactNode, RefObject} from "react";
 import {useFormReset} from "@react-aria/utils";
-import {useInteractionModality} from "@react-aria/interactions";
 import {useVisuallyHidden} from "@react-aria/visually-hidden";
 import {MultiSelectProps, MultiSelectState} from "@nextui-org/use-aria-multiselect";
 import {useFormValidation} from "@react-aria/form";
@@ -71,7 +70,6 @@ export function useHiddenSelect<T>(
     onChange,
   } = props;
   let {validationBehavior, isRequired, isInvalid} = data;
-  let modality = useInteractionModality();
   let {visuallyHiddenProps} = useVisuallyHidden();
 
   useFormReset(props.selectRef!, state.selectedKeys, state.setSelectedKeys);
@@ -84,14 +82,6 @@ export function useHiddenSelect<T>(
     props.selectRef,
   );
 
-  const commonProps = {
-    autoComplete,
-    disabled: isDisabled,
-    "aria-invalid": isInvalid || undefined,
-    "aria-required": (isRequired && validationBehavior === "aria") || undefined,
-    required: isRequired && validationBehavior === "native",
-  };
-
   return {
     containerProps: {
       ...visuallyHiddenProps,
@@ -99,19 +89,16 @@ export function useHiddenSelect<T>(
       ["data-a11y-ignore"]: "aria-hidden-focus",
     },
     inputProps: {
-      ...commonProps,
-      type: "text",
-      tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
-      value: [...state.selectedKeys].join(",") ?? "",
-      style: {fontSize: 16},
-      onFocus: () => triggerRef.current?.focus(),
-      onChange: () => {}, // The onChange is handled by the `select` element
+      style: {display: "none"},
     },
     selectProps: {
-      ...commonProps,
+      autoComplete,
+      disabled: isDisabled,
+      "aria-invalid": isInvalid || undefined,
+      "aria-required": (isRequired && validationBehavior === "aria") || undefined,
+      required: isRequired && validationBehavior === "native",
       name,
       tabIndex: -1,
-      size: state.collection.size,
       value:
         selectionMode === "multiple"
           ? [...state.selectedKeys].map((k) => String(k))
@@ -132,11 +119,7 @@ export function useHiddenSelect<T>(
 export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
   let {state, triggerRef, selectRef, label, name, isDisabled} = props;
 
-  let {containerProps, inputProps, selectProps} = useHiddenSelect(
-    {...props, selectRef},
-    state,
-    triggerRef,
-  );
+  let {containerProps, selectProps} = useHiddenSelect({...props, selectRef}, state, triggerRef);
 
   // If used in a <form>, use a hidden input so the value can be submitted to a server.
   // If the collection isn't too big, use a hidden <select> element for this so that browser
@@ -144,7 +127,6 @@ export function HiddenSelect<T>(props: HiddenSelectProps<T>) {
   if (state.collection.size <= 300) {
     return (
       <div {...containerProps} data-testid="hidden-select-container">
-        <input {...inputProps} />
         <label>
           {label}
           <select {...selectProps} ref={selectRef}>

From a7db63b2393c3591b997e7f756592de7f5daeeec Mon Sep 17 00:00:00 2001
From: Peterl561 <peter.liu@treelab.com>
Date: Sat, 21 Dec 2024 18:14:20 -0800
Subject: [PATCH 3/4] test(select): updated validation tests

---
 .../select/__tests__/select.test.tsx          | 277 +++++++++++++++---
 1 file changed, 233 insertions(+), 44 deletions(-)

diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx
index 13b90369a4..fe1c82ea23 100644
--- a/packages/components/select/__tests__/select.test.tsx
+++ b/packages/components/select/__tests__/select.test.tsx
@@ -1180,30 +1180,136 @@ describe("validation", () => {
   });
 
   describe("validationBehavior=aria", () => {
-    it("supports isRequired", async () => {
+    it("supports validate function", async () => {
+      const onSubmit = jest.fn((e) => e.preventDefault());
+
+      const {getByTestId} = render(
+        <Form data-testid="form" validationBehavior="aria" onSubmit={onSubmit}>
+          <Select
+            aria-label="Favorite Animal"
+            data-testid="trigger"
+            defaultSelectedKeys={["penguin"]}
+            label="Favorite Animal"
+            validate={(v) => (v.includes("penguin") ? "Invalid value" : null)}
+          >
+            <SelectItem key="penguin">Penguin</SelectItem>
+            <SelectItem key="zebra">Zebra</SelectItem>
+            <SelectItem key="shark">Shark</SelectItem>
+          </Select>
+          <button data-testid="submit-button" type="submit">
+            Submit
+          </button>
+        </Form>,
+      );
+
+      const trigger = getByTestId("trigger") as HTMLButtonElement;
+      const select = document.querySelector("select");
+      const submit = getByTestId("submit-button");
+
+      // aria validation is always valid
+      expect(select?.validity.valid).toBe(true);
+      // aria validation validates on initial render
+      expect(trigger).toHaveAttribute("aria-describedby");
+      expect(select).toHaveAttribute("aria-invalid", "true");
+      expect(document.getElementById(trigger.getAttribute("aria-describedby")!)).toHaveTextContent(
+        "Invalid value",
+      );
+
+      await user.click(trigger);
+
+      let listboxItems = document.querySelectorAll("[role='option']");
+
+      await user.click(listboxItems[1]); // zebra
+
+      await user.click(submit);
+
+      expect(select?.validity.valid).toBe(true);
+      expect(trigger).not.toHaveAttribute("aria-describedby");
+      expect(select).not.toHaveAttribute("aria-invalid");
+    });
+
+    it("supports server validation", async () => {
       function FormRender() {
-        const [serverErrors, setServerErrors] = React.useState({});
+        const [serverErrors, setServerErrors] = React.useState({animal: "initial error"});
 
         const onSubmit = (e) => {
           e.preventDefault();
-          const formData = new FormData(e.target as HTMLFormElement);
-          const value = formData.get("animal");
-
-          if (!value || (value !== "cat" && value !== "dog")) {
-            setServerErrors({
-              animal: "Please select a cat or dog",
-            });
-          } else {
-            setServerErrors({});
-          }
+
+          setServerErrors({
+            animal: "new error",
+          });
         };
 
         return (
-          <Form data-testid="form" validationErrors={serverErrors} onSubmit={onSubmit}>
+          <Form
+            data-testid="form"
+            validationBehavior="aria"
+            validationErrors={serverErrors}
+            onSubmit={onSubmit}
+          >
+            <Select
+              aria-label="Favorite Animal"
+              data-testid="trigger"
+              label="Favorite Animal"
+              name="animal"
+            >
+              <SelectItem key="penguin">Penguin</SelectItem>
+              <SelectItem key="zebra">Zebra</SelectItem>
+              <SelectItem key="shark">Shark</SelectItem>
+            </Select>
+            <button data-testid="submit-button" type="submit">
+              Submit
+            </button>
+          </Form>
+        );
+      }
+
+      const {getByTestId} = render(<FormRender />);
+
+      const trigger = getByTestId("trigger") as HTMLButtonElement;
+      const select = document.querySelector("select");
+      const submit = getByTestId("submit-button");
+
+      // aria validation is always valid
+      expect(select?.validity.valid).toBe(true);
+      expect(trigger).toHaveAttribute("aria-describedby");
+      expect(select).toHaveAttribute("aria-invalid", "true");
+      expect(document.getElementById(trigger.getAttribute("aria-describedby")!)).toHaveTextContent(
+        "initial error",
+      );
+
+      await user.click(trigger);
+
+      let listboxItems = document.querySelectorAll("[role='option']");
+
+      await user.click(listboxItems[1]); // zebra
+
+      expect(select?.validity.valid).toBe(true);
+      expect(trigger).not.toHaveAttribute("aria-describedby");
+      expect(select).not.toHaveAttribute("aria-invalid");
+
+      await user.click(submit);
+
+      expect(select?.validity.valid).toBe(true);
+      expect(trigger).toHaveAttribute("aria-describedby");
+      expect(select).toHaveAttribute("aria-invalid");
+      expect(document.getElementById(trigger.getAttribute("aria-describedby")!)).toHaveTextContent(
+        "new error",
+      );
+    });
+  });
+
+  describe("validationBehavior=native", () => {
+    it("supports isRequired", async () => {
+      function FormRender() {
+        const onSubmit = jest.fn((e) => e.preventDefault());
+
+        return (
+          <Form data-testid="form" validationBehavior="native" onSubmit={onSubmit}>
             <Select
               isRequired
               aria-label="Favorite Animal"
-              data-testid="select"
+              data-testid="trigger"
               label="Favorite Animal"
               name="animal"
             >
@@ -1213,7 +1319,7 @@ describe("validation", () => {
               <SelectItem key="zebra">Zebra</SelectItem>
               <SelectItem key="shark">Shark</SelectItem>
             </Select>
-            <button data-testid="button" type="submit">
+            <button data-testid="submit-button" type="submit">
               Submit
             </button>
           </Form>
@@ -1222,75 +1328,158 @@ describe("validation", () => {
 
       const {getByTestId} = render(<FormRender />);
 
-      const select = getByTestId("select");
-      const input = document.querySelector("input");
+      const trigger = getByTestId("trigger") as HTMLButtonElement;
+      const select = document.querySelector("select");
+      const submit = getByTestId("submit-button");
 
-      expect(select).not.toHaveAttribute("aria-describedby");
-      const button = getByTestId("button");
+      expect(select?.validity.valid).toBe(false);
+      expect(select?.validity.valueMissing).toBe(true);
+      // native validation does not validate until submit
+      expect(select).toHaveAttribute("required");
+      expect(trigger).not.toHaveAttribute("aria-describedby");
 
-      await user.click(button);
+      await user.click(submit);
 
-      expect(select).toHaveAttribute("aria-describedby");
-      expect(input).toHaveAttribute("aria-required");
+      expect(select?.validity.valid).toBe(false);
+      expect(select?.validity.valueMissing).toBe(true);
+      expect(trigger).toHaveAttribute("aria-describedby");
 
-      expect(document.getElementById(select.getAttribute("aria-describedby")!)).toHaveTextContent(
-        "Please select a cat or dog",
-      );
+      await user.click(trigger);
 
-      await user.click(select);
       let listboxItems = document.querySelectorAll("[role='option']");
 
       await user.click(listboxItems[0]);
 
-      await user.click(button);
+      await user.click(submit);
 
-      expect(select).not.toHaveAttribute("aria-describedby");
+      expect(select?.validity.valid).toBe(true);
+      expect(trigger).not.toHaveAttribute("aria-describedby");
     });
 
     it("supports validate function", async () => {
+      const onSubmit = jest.fn((e) => e.preventDefault());
+
       const {getByTestId} = render(
-        <Form data-testid="form">
+        <Form data-testid="form" validationBehavior="native" onSubmit={onSubmit}>
           <Select
             aria-label="Favorite Animal"
-            data-testid="select"
+            data-testid="trigger"
             defaultSelectedKeys={["penguin"]}
             label="Favorite Animal"
             validate={(v) => (v.includes("penguin") ? "Invalid value" : null)}
-            validationBehavior="aria"
           >
             <SelectItem key="penguin">Penguin</SelectItem>
             <SelectItem key="zebra">Zebra</SelectItem>
             <SelectItem key="shark">Shark</SelectItem>
           </Select>
-          <button data-testid="button" type="submit">
+          <button data-testid="submit-button" type="submit">
             Submit
           </button>
         </Form>,
       );
 
-      const select = getByTestId("select");
-      const input = document.querySelector("input");
-      const button = getByTestId("button");
+      const trigger = getByTestId("trigger") as HTMLButtonElement;
+      const select = document.querySelector("select");
+      const submit = getByTestId("submit-button");
+
+      expect(select?.validity.valid).toBe(false);
+      expect(select?.validity.customError).toBe(true);
+      // native validation does not validate until submit
+      expect(trigger).not.toHaveAttribute("aria-describedby");
+      expect(select).not.toHaveAttribute("aria-invalid", "true");
 
-      expect(select).toHaveAttribute("aria-describedby");
-      expect(input).toHaveAttribute("aria-invalid", "true");
+      await user.click(submit);
 
-      expect(document.getElementById(select.getAttribute("aria-describedby")!)).toHaveTextContent(
+      expect(select?.validity.valid).toBe(false);
+      expect(select?.validity.customError).toBe(true);
+      expect(trigger).toHaveAttribute("aria-describedby");
+      expect(select).toHaveAttribute("aria-invalid", "true");
+      expect(document.getElementById(trigger.getAttribute("aria-describedby")!)).toHaveTextContent(
         "Invalid value",
       );
 
-      expect(input?.validity.valid).toBe(true);
-
-      await user.click(select);
+      await user.click(trigger);
 
       let listboxItems = document.querySelectorAll("[role='option']");
 
-      await user.click(listboxItems[1]); // Select "Zebra"
+      await user.click(listboxItems[1]); // zebra
 
-      await user.click(button);
+      await user.click(submit);
 
-      expect(select).not.toHaveAttribute("aria-describedby");
+      expect(select?.validity.valid).toBe(true);
+      expect(trigger).not.toHaveAttribute("aria-describedby");
       expect(select).not.toHaveAttribute("aria-invalid");
     });
+
+    it("supports server validation", async () => {
+      function FormRender() {
+        const [serverErrors, setServerErrors] = React.useState({animal: "initial error"});
+
+        const onSubmit = (e) => {
+          e.preventDefault();
+
+          setServerErrors({
+            animal: "new error",
+          });
+        };
+
+        return (
+          <Form
+            data-testid="form"
+            validationBehavior="native"
+            validationErrors={serverErrors}
+            onSubmit={onSubmit}
+          >
+            <Select
+              aria-label="Favorite Animal"
+              data-testid="trigger"
+              label="Favorite Animal"
+              name="animal"
+            >
+              <SelectItem key="penguin">Penguin</SelectItem>
+              <SelectItem key="zebra">Zebra</SelectItem>
+              <SelectItem key="shark">Shark</SelectItem>
+            </Select>
+            <button data-testid="submit-button" type="submit">
+              Submit
+            </button>
+          </Form>
+        );
+      }
+
+      const {getByTestId} = render(<FormRender />);
+
+      const trigger = getByTestId("trigger") as HTMLButtonElement;
+      const select = document.querySelector("select");
+      const submit = getByTestId("submit-button");
+
+      expect(select?.validity.valid).toBe(false);
+      expect(select?.validity.customError).toBe(true);
+      expect(trigger).toHaveAttribute("aria-describedby");
+      expect(select).toHaveAttribute("aria-invalid", "true");
+      expect(document.getElementById(trigger.getAttribute("aria-describedby")!)).toHaveTextContent(
+        "initial error",
+      );
+
+      await user.click(trigger);
+
+      let listboxItems = document.querySelectorAll("[role='option']");
+
+      await user.click(listboxItems[1]); // zebra
+
+      expect(select?.validity.valid).toBe(true);
+      expect(trigger).not.toHaveAttribute("aria-describedby");
+      expect(select).not.toHaveAttribute("aria-invalid");
+
+      await user.click(submit);
+
+      expect(select?.validity.valid).toBe(false);
+      expect(select?.validity.customError).toBe(true);
+      expect(trigger).toHaveAttribute("aria-describedby");
+      expect(select).toHaveAttribute("aria-invalid");
+      expect(document.getElementById(trigger.getAttribute("aria-describedby")!)).toHaveTextContent(
+        "new error",
+      );
+    });
   });
 });

From 5b5796c9af832135447bf08985a847c49f115809 Mon Sep 17 00:00:00 2001
From: Peterl561 <peter.liu@treelab.com>
Date: Sat, 21 Dec 2024 18:20:44 -0800
Subject: [PATCH 4/4] chore(changeset): fix native validation behavior for
 select

---
 .changeset/lemon-cheetahs-grow.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/lemon-cheetahs-grow.md

diff --git a/.changeset/lemon-cheetahs-grow.md b/.changeset/lemon-cheetahs-grow.md
new file mode 100644
index 0000000000..d5c11df337
--- /dev/null
+++ b/.changeset/lemon-cheetahs-grow.md
@@ -0,0 +1,7 @@
+---
+"@nextui-org/use-aria-multiselect": patch
+"@nextui-org/select": patch
+---
+
+fixed validationBehavior=native showing browser ui error for select component (#3913)
+fixed select not committing error message when validationBehavior=native