diff --git a/src/Chip/Chip.js b/src/Chip/Chip.js
index 896c6960e99809..9da780f4676615 100644
--- a/src/Chip/Chip.js
+++ b/src/Chip/Chip.js
@@ -57,6 +57,14 @@ class Chip extends Component {
* CSS `className` of the root element.
*/
className: PropTypes.node,
+ /**
+ * The element to use as the container for the Chip. Either a string to
+ * use a DOM element or a ReactElement.
+ */
+ containerElement: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.element,
+ ]),
/**
* Override the label color.
*/
@@ -103,6 +111,7 @@ class Chip extends Component {
};
static defaultProps = {
+ containerElement: 'div', // Firefox doesn't support nested buttons
onBlur: () => {},
onFocus: () => {},
onKeyDown: () => {},
@@ -234,6 +243,7 @@ class Chip extends Component {
const {
children: childrenProp,
+ containerElement,
style,
className,
labelStyle,
@@ -278,7 +288,7 @@ class Chip extends Component {
{...other}
{...buttonEventHandlers}
className={className}
- containerElement="div" // Firefox doesn't support nested buttons
+ containerElement={containerElement}
disableTouchRipple={true}
disableFocusRipple={true}
style={Object.assign(styles.root, style)}
diff --git a/src/Chip/Chip.spec.js b/src/Chip/Chip.spec.js
index c74a52bbdba68c..7ea0d3828c4dcc 100644
--- a/src/Chip/Chip.spec.js
+++ b/src/Chip/Chip.spec.js
@@ -160,4 +160,31 @@ describe('', () => {
});
});
});
+
+ describe('prop: containerElement', () => {
+ it('should use div if no containerElement specified', () => {
+ const wrapper = themedShallow(
+ Label
+ );
+ const button = wrapper.dive({context: {muiTheme}});
+ assert.strictEqual(button.is('div'), true, 'should match an div element');
+ });
+
+ it('should use the given string containerElement prop', () => {
+ const wrapper = themedShallow(
+ Label
+ );
+ const button = wrapper.dive({context: {muiTheme}});
+ assert.strictEqual(button.is('span'), true, 'should match an span element');
+ });
+
+ it('should use the given ReactElement containerElement prop', () => {
+ const CustomElement = (props) => ;
+ const wrapper = themedShallow(
+ }>Label
+ );
+ const button = wrapper.dive({context: {muiTheme}});
+ assert.strictEqual(button.is(CustomElement), true, 'should match the custom element');
+ });
+ });
});