fix(select): prevent default browser error UI from appearing

.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).

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(
+      <form onSubmit={onSubmit}>
+        <Select
+          isRequired
+          data-testid="select"
+          label="Test"
+          name="select"
+          // validationBehavior="native"
+        >
+          <SelectItem key="one">One</SelectItem>
+          <SelectItem key="two">Two</SelectItem>
+          <SelectItem key="three">Three</SelectItem>
+        </Select>
+        <button data-testid="button" type="submit">
+          Submit
+        </button>
+      </form>,
+    );
+
+    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);
+  });
+});

packages/components/select/src/hidden-select.tsx

@@ -92,24 +92,18 @@ export function useHiddenSelect<T>(
     inputProps: {
       type: "text",
       tabIndex: modality == null || state.isFocused || state.isOpen ? -1 : 0,
-      autoComplete,
-      value: [...state.selectedKeys].join(",") ?? "",
-      required: isRequired,
       style: {fontSize: 16},
       onFocus: () => triggerRef.current?.focus(),
       disabled: isDisabled,
-      // The onChange is handled by the `select` element. This avoids the `form` with input `value`
-      // and no `onChange` warning.
-      onChange: () => {},
     },
     selectProps: {
       name,
       tabIndex: -1,
       autoComplete,
       // TODO: Address validation for cases where an option is selected and then deselected.
       // required: validationBehavior === "native" && isRequired,
+      required: isRequired,
       disabled: isDisabled,
-      size: state.collection.size,
       value:
         selectionMode === "multiple"
           ? [...state.selectedKeys].map((k) => String(k))

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,