Skip to content

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

@pzaczkiewicz-athenahealth

Description

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

[email protected]

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinggood first issueGood for newcomershelp wantedExtra attention is needed

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions