fix(select): remove hidden input from hidden-select

heroui-inc · Dec 22, 2024 · a683374 · a683374
1 parent 11a543c
commit a683374
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 26 deletions.
diff --git 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
@@ -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,34 +82,23 @@ 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,
       "aria-hidden": true,
       ["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,19 +119,14 @@ 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
   // autofill will work. Otherwise, use an <input type="hidden">.
   if (state.collection.size <= 300) {
     return (
       <div {...containerProps} data-testid="hidden-select-container">
-        <input {...inputProps} />
         <label>
           {label}
           <select {...selectProps} ref={selectRef}>