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
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