mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.52k stars 32.18k forks source link

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

Open jonnylink opened 11 months ago

jonnylink commented 11 months ago

Duplicates

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

jonnylink commented 10 months ago

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.