diff --git a/packages/mui-material/src/Checkbox/Checkbox.js b/packages/mui-material/src/Checkbox/Checkbox.js index dcbb59de9aa90b..e5a19e4f1333e5 100644 --- 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 index 17c12fc3878ae2..63d95bfe3b7438 100644 --- 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('', () => { const { render } = createRenderer(); @@ -197,4 +198,20 @@ describe('', () => { expect(fontSizeSpy.args[0][0]).to.equal('foo'); }); + + it('should have a ripple', async () => { + const { getByRole } = render(); + 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( + , + ); + const checkbox = getByRole('checkbox').parentElement; + await ripple.startTouch(checkbox); + expect(checkbox.querySelector('.touch-ripple')).to.equal(null); + }); });