mui / mui/material-ui

[joy-ui][FormControl]Select with Checkbox inside an Option wrapped in FormControl causes warning and performance issues

Open
#40,763 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component: FormControl on hold package: joy-ui scope: text field
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:

  1. Open Console
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.