From f25a795833b808218b1567c193b989da1ade375d Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 14 Oct 2024 13:37:41 +0700
Subject: [PATCH] fix disableRipple

---
 packages/mui-material/src/Checkbox/Checkbox.js  |  1 +
 .../mui-material/src/Checkbox/Checkbox.test.js  | 17 +++++++++++++++++
 2 files changed, 18 insertions(+)

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('<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);
+  });
 });