diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js index d3876a083f15c3..a15dfb0133430b 100644 --- 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 index 297c6b83ab72ad..30556488a819de 100644 --- a/packages/material-ui/src/Chip/Chip.test.js +++ b/packages/material-ui/src/Chip/Chip.test.js @@ -84,6 +84,13 @@ describe('', () => { expect(button).toHaveAccessibleName('My Chip'); }); + it('should render link with the button base', () => { + const { container } = render(); + + 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( {}} tabIndex={5} />);