Function HiddenSelect

packages/react-aria/src/select/HiddenSelect.tsx:155–245

(
  props: HiddenSelectProps<T, M>
)

 * form autofill, mobile form navigation, and native form submission.
 */
export function HiddenSelect<T, M extends SelectionMode = 'single'>(
  props: HiddenSelectProps<T, M>
): JSX.Element | null {
  let {state, triggerRef, label, name, form, isDisabled} = props;
  let selectRef = useRef(null);
  let inputRef = useRef(null);
  let {containerProps, selectProps} = useHiddenSelect(
    {...props, selectRef: state.collection.size <= 300 ? selectRef : inputRef},
    state,
    triggerRef
  );

  let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];

  // 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">
        <label>
          {label}
          <select {...selectProps} ref={selectRef}>
            <option value="" label={'\u00A0'}>
              {'\u00A0'}
            </option>
            {[...state.collection.getKeys()].map(key => {
              let item = state.collection.getItem(key);
              if (item && item.type === 'item') {
                return (
                  <option key={item.key} value={item.key}>
                    {item.textValue}
                  </option>
                );
              }
            })}
            {/* The collection may be empty during the initial render. */}
            {/* Rendering options for the current values ensures the select has a value immediately, */}
            {/* making FormData reads consistent. */}
            {state.collection.size === 0 &&
              name &&
              values.map((value, i) => <option key={i} value={value ?? ''} />)}
          </select>
        </label>
      </div>
    );
  } else if (name) {
    let data = selectData.get(state) || {};
    let {validationBehavior} = data;

    // Always render at least one hidden input to ensure required form submission.
    if (values.length === 0) {
      values = [null];
    }

    let res = values.map((value, i) => {
      let inputProps: InputHTMLAttributes<HTMLInputElement> = {
        type: 'hidden',