[Checkbox] Fix disableRipple regression (#44099)

mui · Oct 14, 2024 · 56a7044 · 56a7044
1 parent c8c7b5e
commit 56a7044
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js
@@ -155,6 +155,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
       ownerState={ownerState}
       ref={ref}
       className={clsx(classes.root, className)}
+      disableRipple={disableRipple}
       {...other}
       classes={classes}
     />

diff --git a/packages/mui-material/src/Checkbox/Checkbox.test.js b/packages/mui-material/src/Checkbox/Checkbox.test.js
@@ -7,6 +7,7 @@ import FormControl from '@mui/material/FormControl';
 import ButtonBase from '@mui/material/ButtonBase';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import describeConformance from '../../test/describeConformance';
+import * as ripple from '../../test/ripple';
 
 describe('<Checkbox />', () => {
   const { render } = createRenderer();
@@ -197,4 +198,20 @@ describe('<Checkbox />', () => {
 
     expect(fontSizeSpy.args[0][0]).to.equal('foo');
   });
+
+  it('should have a ripple', async () => {
+    const { getByRole } = render(<Checkbox TouchRippleProps={{ className: 'touch-ripple' }} />);
+    const checkbox = getByRole('checkbox').parentElement;
+    await ripple.startTouch(checkbox);
+    expect(checkbox.querySelector('.touch-ripple')).not.to.equal(null);
+  });
+
+  it('should not have ripple', async () => {
+    const { getByRole } = render(
+      <Checkbox disableRipple TouchRippleProps={{ className: 'touch-ripple' }} />,
+    );
+    const checkbox = getByRole('checkbox').parentElement;
+    await ripple.startTouch(checkbox);
+    expect(checkbox.querySelector('.touch-ripple')).to.equal(null);
+  });
 });