[material-ui][Select] Adding <fieldset disabled> doesn't disable it

[jonnylink]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/friendly-dijkstra-g62dv9?file=/src/Demo.js

Steps:

1. add "disabled" to a surrounding a select component

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 🌎

npx @mui/envinfo

  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

[mj12albert]

@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

[jonnylink]

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.