diff --git a/packages/material-ui/src/Chip/Chip.js b/packages/material-ui/src/Chip/Chip.js
index e87c16581e2a66..90c26653eb0630 100644
--- a/packages/material-ui/src/Chip/Chip.js
+++ b/packages/material-ui/src/Chip/Chip.js
@@ -277,7 +277,7 @@ class Chip extends React.Component {
avatar: avatarProp,
classes,
className: classNameProp,
- clickable,
+ clickable: clickableProp,
color,
component: Component,
deleteIcon: deleteIconProp,
@@ -292,13 +292,13 @@ class Chip extends React.Component {
...other
} = this.props;
+ const clickable = clickableProp !== false && onClick ? true : clickableProp;
const className = classNames(
classes.root,
{
[classes[`color${capitalize(color)}`]]: color !== 'default',
- [classes.clickable]: onClick || clickable,
- [classes[`clickableColor${capitalize(color)}`]]:
- (onClick || clickable) && color !== 'default',
+ [classes.clickable]: clickable,
+ [classes[`clickableColor${capitalize(color)}`]]: clickable && color !== 'default',
[classes.deletable]: onDelete,
[classes[`deletableColor${capitalize(color)}`]]: onDelete && color !== 'default',
[classes.outlined]: variant === 'outlined',
@@ -408,7 +408,9 @@ Chip.propTypes = {
className: PropTypes.string,
/**
* If true, the chip will appear clickable, and will raise when pressed,
- * even if the onClick property is not defined. This can be used, for example,
+ * even if the onClick property is not defined.
+ * If false, the chip will not be clickable, even if onClick peoperty is defined.
+ * This can be used, for example,
* along with the component property to indicate an anchor Chip is clickable.
*/
clickable: PropTypes.bool,
@@ -461,7 +463,6 @@ Chip.propTypes = {
};
Chip.defaultProps = {
- clickable: false,
component: 'div',
color: 'default',
variant: 'default',
diff --git a/pages/api/chip.md b/pages/api/chip.md
index 287eab1306d97a..c001e2118c5a4f 100644
--- a/pages/api/chip.md
+++ b/pages/api/chip.md
@@ -22,7 +22,7 @@ Chips represent complex entities in small blocks, such as a contact.
| avatar | element | | Avatar element. |
| children | unsupportedProp | | This property isn't supported. Use the `component` property if you need to change the children structure. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
-| clickable | bool | false | If true, the chip will appear clickable, and will raise when pressed, even if the onClick property is not defined. This can be used, for example, along with the component property to indicate an anchor Chip is clickable. |
+| clickable | bool | | If true, the chip will appear clickable, and will raise when pressed, even if the onClick property is not defined. If false, the chip will not be clickable, even if onClick peoperty is defined. This can be used, for example, along with the component property to indicate an anchor Chip is clickable. |
| color | enum: 'default' |
'primary' |
'secondary'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. |
| component | union: string |
func |
object
| 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
| deleteIcon | element | | Override the default delete icon element. Shown only if `onDelete` is set. |