Open jonnylink opened 11 months ago
@jonnylink <fieldset disabled>
can only affect native form control elements (e.g. <input>
, <button>
), since the Select component does not use any internally this wouldn't work
A workaround is to have the FormControl render a fieldset
and pass disabled
there:
<FormControl component="fieldset" disabled>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
Example sandbox: https://codesandbox.io/s/https-github-com-mui-material-ui-issues-39634-l9n4zh
Another alternative is to use the Select
component in native mode, so it can be affected by a native fieldset: https://codesandbox.io/s/disabled-fieldset-native-select-577p9j
Thanks for the feedback Albert. I suspected that this would be the reason it isn't working correctly. It still seems like it should be possible for components to adhere to expected behaviors.
Duplicates
Latest version
Steps to reproduce 🕹
Link to live example: https://codesandbox.io/s/friendly-dijkstra-g62dv9?file=/src/Demo.js
Steps:
Current behavior 😯
The form element is active
Expected behavior 🤔
Form element should be disabled like the rest of the elements when the fieldset is marked disabled
Context 🔦
I need to disable all form elements on page with a huge form.
I think I'm also supposed to mention we have a license: Order #72705
Your environment 🌎
``` System: OS: macOS 14.0 Binaries: Node: 20.3.0 - ~/.nvm/versions/node/v20.3.0/bin/node Yarn: 3.2.2 - /opt/homebrew/bin/yarn npm: 9.6.7 - ~/.nvm/versions/node/v20.3.0/bin/npm Browsers: Chrome: 118.0.5993.70 Edge: Not Found Safari: 17.0 ```npx @mui/envinfo