chore: add useSelect hiddenSelectProps (#8490)

Author: snowystinger

packages/@react-aria/select/docs/useSelect.mdx

@@ -144,18 +144,14 @@ function Select(props) {
     labelProps,
     triggerProps,
     valueProps,
-    menuProps
+    menuProps,
+    hiddenSelectProps
   } = useSelect(props, state, ref);
 
   return (
     <div style={{display: 'inline-block'}}>
       <div {...labelProps}>{props.label}</div>
-      <HiddenSelect
-        isDisabled={props.isDisabled}
-        state={state}
-        triggerRef={ref}
-        label={props.label}
-        name={props.name} />
+      <HiddenSelect {...hiddenSelectProps} />
       <Button
         {...triggerProps}
         buttonRef={ref}

packages/@react-aria/select/src/useSelect.ts

@@ -16,6 +16,7 @@ import {AriaSelectProps} from '@react-types/select';
 import {chain, filterDOMProps, mergeProps, useId} from '@react-aria/utils';
 import {DOMAttributes, KeyboardDelegate, RefObject, ValidationResult} from '@react-types/shared';
 import {FocusEvent, useMemo} from 'react';
+import {HiddenSelectProps} from './HiddenSelect';
 import {ListKeyboardDelegate, useTypeSelect} from '@react-aria/selection';
 import {SelectState} from '@react-stately/select';
 import {setInteractionModality} from '@react-aria/interactions';
@@ -48,7 +49,10 @@ export interface SelectAria<T> extends ValidationResult {
   descriptionProps: DOMAttributes,
 
   /** Props for the select's error message element, if any. */
-  errorMessageProps: DOMAttributes
+  errorMessageProps: DOMAttributes,
+
+  /** Props for the hidden select element. */
+  hiddenSelectProps: HiddenSelectProps<T>
 }
 
 interface SelectData {
@@ -235,6 +239,14 @@ export function useSelect<T>(props: AriaSelectOptions<T>, state: SelectState<T>,
     errorMessageProps,
     isInvalid,
     validationErrors,
-    validationDetails
+    validationDetails,
+    hiddenSelectProps: {
+      isDisabled,
+      name,
+      label: props.label,
+      state,
+      triggerRef: ref,
+      form
+    }
   };
 }

packages/@react-aria/select/stories/example.tsx

@@ -28,7 +28,8 @@ export function Select<T extends object>(props: AriaSelectProps<T>): JSX.Element
     labelProps,
     triggerProps,
     valueProps,
-    menuProps
+    menuProps,
+    hiddenSelectProps
   } = useSelect(props, state, ref);
 
   // Get props for the button based on the trigger props from useSelect
@@ -37,11 +38,7 @@ export function Select<T extends object>(props: AriaSelectProps<T>): JSX.Element
   return (
     <div style={{position: 'relative', display: 'inline-block'}}>
       <div {...labelProps}>{props.label}</div>
-      <HiddenSelect
-        state={state}
-        triggerRef={ref}
-        label={props.label}
-        name={props.name} />
+      <HiddenSelect {...hiddenSelectProps} />
       <button
         {...buttonProps}
         ref={ref}

packages/@react-spectrum/picker/src/Picker.tsx

@@ -59,11 +59,8 @@ export const Picker = React.forwardRef(function Picker<T extends object>(props:
     shouldFlip = true,
     placeholder = stringFormatter.format('placeholder'),
     isQuiet,
-    label,
     labelPosition = 'top' as LabelPosition,
     menuWidth,
-    name,
-    form,
     autoFocus
   } = props;
 
@@ -83,7 +80,7 @@ export const Picker = React.forwardRef(function Picker<T extends object>(props:
   // so that the layout information can be cached even while the listbox is not mounted.
   // We also use the layout as the keyboard delegate for type to select.
   let layout = useListBoxLayout();
-  let {labelProps, triggerProps, valueProps, menuProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({
+  let {labelProps, triggerProps, valueProps, menuProps, hiddenSelectProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useSelect({
     ...props,
     'aria-describedby': (isLoadingInitial ? progressCircleId : undefined)
   }, state, unwrappedTriggerRef);
@@ -181,12 +178,7 @@ export const Picker = React.forwardRef(function Picker<T extends object>(props:
       }>
       <HiddenSelect
         autoComplete={autoComplete}
-        isDisabled={isDisabled}
-        state={state}
-        triggerRef={unwrappedTriggerRef}
-        label={label}
-        name={name}
-        form={form} />
+        {...hiddenSelectProps} />
       <PressResponder {...mergeProps(hoverProps, triggerProps)}>
         <FieldButton
           ref={triggerRef}

packages/react-aria-components/src/Select.tsx

@@ -133,6 +133,7 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
     menuProps,
     descriptionProps,
     errorMessageProps,
+    hiddenSelectProps,
     ...validation
   } = useSelect({
     ...removeDataAttributes(props),
@@ -214,13 +215,8 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
         data-required={props.isRequired || undefined}>
         {renderProps.children}
         <HiddenSelect
-          autoComplete={props.autoComplete}
-          state={state}
-          triggerRef={buttonRef}
-          label={label}
-          name={props.name}
-          form={props.form}
-          isDisabled={props.isDisabled} />
+          {...hiddenSelectProps}
+          autoComplete={props.autoComplete} />
       </div>
     </Provider>
   );