react-aria-components Select required validation does not fire with more than 300 options

[pzaczkiewicz-athenahealth]

Provide a general summary of the issue here

If more than 300 options are provided to a required Select, then the form can still be submitted

🤔 Expected Behavior?

Form validation prevents the form from being submitted

😯 Current Behavior

The form is submitted with null data

💁 Possible Solution

Make the required?

🔦 Context

No reported user issues, but noticed the change in behavior with > 300 options when looking at HiddenSelect source code.

🖥️ Steps to Reproduce

const lotsOfOptions: ReadonlyArray<NamedDateRange> = Array.from(Array(500)).map((n, index) => ({
  id: `option-${index}`,
  label: `Option ${index}`,
  start: null,
  end: null,
}));

export const WithAriaForm = (): ReactElement => {
  return (
    <Form>
      <Select name="animal" isRequired>
        <Label>Favorite Animal</Label>
        <Button>
          <SelectValue />
          <span aria-hidden="true">▼</span>
        </Button>
        <FieldError />
        <Popover>
          <ListBox items={lotsOfOptions}>{(option) => <ListBoxItem>{option.label}</ListBoxItem>}</ListBox>
        </Popover>
      </Select>
      <Button type="submit">Submit</Button>
    </Form>
  );
};

Submit the form

Version

react-aria-components@1.7.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

Athenahealth/Forge

🕷 Tracking Issue

No response

[devongovett]

In the fallback case here, we could use a hidden <input type="text"> with the required attribute instead of an <input type="hidden">. This would prevent browser form submission.

react-spectrum/packages/@react-aria/select/src/HiddenSelect.tsx

Lines 144 to 151 in 671f0b4

	return (
	<input
	type="hidden"
	autoComplete={selectProps.autoComplete}
	name={name}
	disabled={isDisabled}
	value={state.selectedKey ?? ''} />
	);

As an example, this is what DateField does:

react-spectrum/packages/@react-aria/datepicker/src/useDateField.ts

Lines 156 to 164 in 671f0b4

	if (props.validationBehavior === 'native') {
	// Use a hidden <input type="text"> rather than <input type="hidden">
	// so that an empty value blocks HTML form submission when the field is required.
	inputProps.type = 'text';
	inputProps.hidden = true;
	inputProps.required = props.isRequired;
	// Ignore react warning.
	inputProps.onChange = () => {};
	}