[Radio] Fix disabled state styling regression (#43592)

mui · Sep 9, 2024 · 98be46d · 98be46d
1 parent 64aaf56
commit 98be46d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/packages/mui-material/src/Radio/Radio.js b/packages/mui-material/src/Radio/Radio.js
@@ -9,6 +9,7 @@ import SwitchBase from '../internal/SwitchBase';
 import RadioButtonIcon from './RadioButtonIcon';
 import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
+import useFormControl from '../FormControl/useFormControl';
 import useRadioGroup from '../RadioGroup/useRadioGroup';
 import radioClasses, { getRadioUtilityClass } from './radioClasses';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
@@ -51,7 +52,7 @@ const RadioRoot = styled(SwitchBase, {
     },
     variants: [
       {
-        props: { color: 'default', disableRipple: false },
+        props: { color: 'default', disabled: false, disableRipple: false },
         style: {
           '&:hover': {
             backgroundColor: theme.vars
@@ -63,7 +64,7 @@ const RadioRoot = styled(SwitchBase, {
       ...Object.entries(theme.palette)
         .filter(([, palette]) => palette && palette.main)
         .map(([color]) => ({
-          props: { color, disableRipple: false },
+          props: { color, disabled: false, disableRipple: false },
           style: {
             '&:hover': {
               backgroundColor: theme.vars
@@ -75,7 +76,7 @@ const RadioRoot = styled(SwitchBase, {
       ...Object.entries(theme.palette)
         .filter(([, palette]) => palette && palette.main)
         .map(([color]) => ({
-          props: { color },
+          props: { color, disabled: false },
           style: {
             [`&.${radioClasses.checked}`]: {
               color: (theme.vars || theme).palette[color].main,
@@ -121,11 +122,26 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
     onChange: onChangeProp,
     size = 'medium',
     className,
+    disabled: disabledProp,
     disableRipple = false,
     ...other
   } = props;
+
+  const muiFormControl = useFormControl();
+
+  let disabled = disabledProp;
+
+  if (muiFormControl) {
+    if (typeof disabled === 'undefined') {
+      disabled = muiFormControl.disabled;
+    }
+  }
+
+  disabled ??= false;
+
   const ownerState = {
     ...props,
+    disabled,
     disableRipple,
     color,
     size,
@@ -154,6 +170,7 @@ const Radio = React.forwardRef(function Radio(inProps, ref) {
       checkedIcon={React.cloneElement(checkedIcon, {
         fontSize: defaultCheckedIcon.props.fontSize ?? size,
       })}
+      disabled={disabled}
       ownerState={ownerState}
       classes={classes}
       name={name}

diff --git a/test/regressions/fixtures/Radio/RadioDisabledState.js b/test/regressions/fixtures/Radio/RadioDisabledState.js
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import Radio from '@mui/material/Radio';
+
+export default function RadioButtonsDisabled() {
+  const [selectedValue, setSelectedValue] = React.useState('a');
+
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+  };
+
+  return (
+    <div>
+      <Radio
+        disabled
+        checked={selectedValue === 'a'}
+        onChange={handleChange}
+        value="a"
+        name="radio-buttons"
+        inputProps={{ 'aria-label': 'A' }}
+      />
+      <Radio
+        disabled
+        checked={selectedValue === 'b'}
+        onChange={handleChange}
+        value="b"
+        name="radio-buttons"
+        inputProps={{ 'aria-label': 'B' }}
+      />
+    </div>
+  );
+}