[joy-ui][FormControl]Select with Checkbox inside an Option wrapped in FormControl causes warning and performance issues
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: (required)
https://codesandbox.io/p/sandbox/thirsty-wave-q9qp54
Steps:
- Open Console
- Observe FormControl error
Current behavior
Adding a Checkbox to the Option inside a Select wrapped with FormControl causes an error stating A FormControl can contain only one control with a larger list of items this causes performance issues
Expected behavior
Performance is not impacted
Context
In my use case the design suggests that inside an option should be checkbox that shows if the item is select or not, also the list of options is 100+ items.
Wrapping the checkbox in its own FormContol makes the error go away and boosts the performance but its still not ideal.
Seems there is an issue regarding multiple control components inside FormControl but I don't see a resolution for that.
https://github.com/mui/material-ui/issues/37764
Maybe there is particular approach that should be taken in these cases?
Your environment
npx @mui/envinfo
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
Search keywords: Select Checkbox Option FormControl
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox reproduction and trace how Select, Option, Checkbox, and FormControl interact. Confirm the warning and performance behavior with a large option list; done means the supported usage no longer emits the FormControl warning or causes the reported performance issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100