diff --git a/docs/examples/ListGroupLinked.js b/docs/examples/ListGroupLinked.js
index 794795c0bb..d3aea14136 100644
--- a/docs/examples/ListGroupLinked.js
+++ b/docs/examples/ListGroupLinked.js
@@ -1,8 +1,14 @@
+function alertClicked () {
+ alert('You clicked the third ListGroupItem');
+}
+
const listgroupInstance = (
Link 1
Link 2
- ...
+
+ Trigger an alert
+
);
diff --git a/src/ListGroup.js b/src/ListGroup.js
index 30dca37c87..32765ce3a6 100644
--- a/src/ListGroup.js
+++ b/src/ListGroup.js
@@ -9,28 +9,26 @@ class ListGroup extends React.Component {
(item, index) => cloneElement(item, { key: item.key ? item.key : index })
);
- let childrenAnchors = false;
+ let shouldRenderDiv = false;
if (!this.props.children) {
- return this.renderDiv(items);
+ shouldRenderDiv = true;
} else {
React.Children.forEach(this.props.children, (child) => {
- if (this.isAnchor(child.props)) {
- childrenAnchors = true;
+ if (this.isAnchorOrButton(child.props)) {
+ shouldRenderDiv = true;
}
-
});
-
}
- if (childrenAnchors){
+ if (shouldRenderDiv){
return this.renderDiv(items);
} else {
return this.renderUL(items);
}
}
- isAnchor(props){
+ isAnchorOrButton(props){
return (props.href || props.onClick);
}
diff --git a/src/ListGroupItem.js b/src/ListGroupItem.js
index 1b11952ac0..cfb41e2b75 100644
--- a/src/ListGroupItem.js
+++ b/src/ListGroupItem.js
@@ -1,7 +1,6 @@
import React, { cloneElement } from 'react';
import BootstrapMixin from './BootstrapMixin';
import classNames from 'classnames';
-import SafeAnchor from './SafeAnchor';
const ListGroupItem = React.createClass({
mixins: [BootstrapMixin],
@@ -32,8 +31,10 @@ const ListGroupItem = React.createClass({
classes.active = this.props.active;
classes.disabled = this.props.disabled;
- if (this.props.href || this.props.onClick) {
+ if (this.props.href) {
return this.renderAnchor(classes);
+ } else if (this.props.onClick) {
+ return this.renderButton(classes);
} else if (this.props.listItem) {
return this.renderLi(classes);
} else {
@@ -52,12 +53,23 @@ const ListGroupItem = React.createClass({
renderAnchor(classes) {
return (
-
{this.props.header ? this.renderStructuredContent() : this.props.children}
-
+
+ );
+ },
+
+ renderButton(classes) {
+ return (
+
);
},
diff --git a/test/ListGroupItemSpec.js b/test/ListGroupItemSpec.js
index b67c8270a2..f4ba9c0aaf 100644
--- a/test/ListGroupItemSpec.js
+++ b/test/ListGroupItemSpec.js
@@ -20,6 +20,15 @@ describe('ListGroupItem', function () {
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group-item'));
});
+ it('Should output a "button" if an "onClick" handler is set', function () {
+ let noop = function () {};
+ let instance = ReactTestUtils.renderIntoDocument(
+ Button
+ );
+ assert.equal(React.findDOMNode(instance).nodeName, 'BUTTON');
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group-item'));
+ });
+
it('Should output an "li" if "listItem" prop is set', function () {
let instance = ReactTestUtils.renderIntoDocument(
Item 1
diff --git a/test/ListGroupSpec.js b/test/ListGroupSpec.js
index cc0684f834..e0503acbdf 100644
--- a/test/ListGroupSpec.js
+++ b/test/ListGroupSpec.js
@@ -131,7 +131,7 @@ describe('ListGroup', function () {
);
assert.equal(React.findDOMNode(instance).nodeName, 'DIV');
- assert.equal(React.findDOMNode(instance).firstChild.nodeName, 'A');
+ assert.equal(React.findDOMNode(instance).firstChild.nodeName, 'BUTTON');
assert.equal(React.findDOMNode(instance).lastChild.nodeName, 'SPAN');
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group'));
});