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