Repository: mui/material-ui (TypeScript)
Date: 2021-10-13 13:39:11+00:00
Task type: Bug Fix

Issue:
[Chip] Unable to disable ripple in clickable Chip
Cannot disable ripple with clickable chip.

- [x] The issue is present in the latest release.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Current Behavior 😯
Even if ripple is set to disabled in the theme, it will remain enabled in clickable Chip.

```
const theme = createTheme({
  components: {
    MuiButtonBase: {
      defaultProps: {
        disableRipple: true,
      },
    },
  },
});
```

## Expected Behavior 🤔
If ripple is set to disabled in the theme, then ripple in clickable Chip should also be disabled.

Ripple can be disabled in FAQs.
https://mui.com/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally

## Steps to Reproduce 🕹

Steps:

1. Create theme, then set disableRipple to MuiButtonBase defaultProps.
2. Add clickable prop to Chip.

```
<Chip label="foo" clickable/>
```

3. Show ripple when I click the Chip.

CodeSandbox: https://codesandbox.io/s/compassionate-kirch-011le?file=/src/index.tsx

Ripple is disabled in the button, but remains enabled in the chip.

## Your Environment 🌎

 Browser:  Google Chrome 93.0.4577.82

<details>
  <summary>`npx @mui/envinfo`</summary>
  System:
    OS: macOS 11.6
  Binaries:
    Node: 15.14.0 - ~/.nodenv/versions/15.14.0/bin/node
    Yarn: 1.22.10 - ~/.nodenv/versions/15.14.0/bin/yarn
    npm: 7.19.1 - ~/.nodenv/versions/15.14.0/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Edge: Not Found
    Firefox: 90.0.2
    Safari: 15.0
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.50 
    @mui/icons-material: ^5.0.3 => 5.0.3 
    @mui/material: ^5.0.3 => 5.0.3 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/system:  5.0.3 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @types/react: 17.0.27 => 17.0.27 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.4.3 => 4.4.3 
</details>

<details>
    <summary>`cat tsconfig.json`</summary>
<code>{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}</code>
</details>



Issue discussion:

Solution patch:
diff --git a/packages/mui-material/src/Chip/Chip.js b/packages/mui-material/src/Chip/Chip.js
--- a/packages/mui-material/src/Chip/Chip.js
+++ b/packages/mui-material/src/Chip/Chip.js
@@ -376,7 +376,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
       ? {
           component: ComponentProp || 'div',
           focusVisibleClassName: classes.focusVisible,
-          disableRipple: Boolean(onDelete),
+          ...(onDelete && { disableRipple: true }),
         }
       : {};
 


Test patch:
diff --git a/packages/mui-material/src/Chip/Chip.test.js b/packages/mui-material/src/Chip/Chip.test.js
--- a/packages/mui-material/src/Chip/Chip.test.js
+++ b/packages/mui-material/src/Chip/Chip.test.js
@@ -12,6 +12,7 @@ import {
 } from 'test/utils';
 import Avatar from '@mui/material/Avatar';
 import Chip, { chipClasses as classes } from '@mui/material/Chip';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import CheckBox from '../internal/svg-icons/CheckBox';
 
 describe('<Chip />', () => {
@@ -86,6 +87,28 @@ describe('<Chip />', () => {
 
       expect(container.firstChild).to.have.class('MuiButtonBase-root');
       expect(container.firstChild).to.have.tagName('a');
+      expect(container.firstChild.querySelector('.MuiTouchRipple-root')).not.to.equal(null);
+    });
+
+    it('should disable ripple when MuiButtonBase has disableRipple in theme', () => {
+      const theme = createTheme({
+        components: {
+          MuiButtonBase: {
+            defaultProps: {
+              disableRipple: true,
+            },
+          },
+        },
+      });
+
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Chip clickable label="My Chip" />
+        </ThemeProvider>,
+      );
+
+      expect(container.firstChild).to.have.class('MuiButtonBase-root');
+      expect(container.firstChild.querySelector('.MuiTouchRipple-root')).to.equal(null);
     });
 
     it('should apply user value of tabIndex', () => {
@@ -153,6 +176,14 @@ describe('<Chip />', () => {
       expect(container.querySelector('#avatar')).not.to.equal(null);
     });
 
+    it('should not create ripples', () => {
+      const { container } = render(
+        <Chip avatar={<Avatar id="avatar">MB</Avatar>} onDelete={() => {}} />,
+      );
+
+      expect(container.firstChild.querySelector('.MuiTouchRipple-root')).to.equal(null);
+    });
+
     it('should apply user value of tabIndex', () => {
       const { container, getByRole } = render(
         <Chip