[Chip] Fix focus-visible regression (#24906)

mui · Feb 15, 2021 · 9412964 · 9412964
1 parent bc84191
commit 9412964
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
@@ -417,7 +417,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   const clickable = clickableProp !== false && onClick ? true : clickableProp;
   const small = size === 'small';
 
-  const component = ComponentProp || (clickable || onDelete ? ButtonBase : 'div');
+  const component = clickable || onDelete ? ButtonBase : ComponentProp || 'div';
 
   const styleProps = {
     ...props,
@@ -435,7 +435,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
   const moreProps =
     component === ButtonBase
       ? {
-          component: 'div',
+          component: ComponentProp || 'div',
           focusVisibleClassName: classes.focusVisible,
           disableRipple: Boolean(onDelete),
         }

diff --git a/packages/material-ui/src/Chip/Chip.test.js b/packages/material-ui/src/Chip/Chip.test.js
@@ -84,6 +84,13 @@ describe('<Chip />', () => {
       expect(button).toHaveAccessibleName('My Chip');
     });
 
+    it('should render link with the button base', () => {
+      const { container } = render(<Chip component="a" clickable label="My text Chip" />);
+
+      expect(container.firstChild).to.have.class('MuiButtonBase-root');
+      expect(container.firstChild).to.have.tagName('a');
+    });
+
     it('should apply user value of tabIndex', () => {
       const { getByRole } = render(<Chip label="My Chip" onClick={() => {}} tabIndex={5} />);