From 459ab0cba8ed3bbfcdb832ea09eafdc1db8d74d3 Mon Sep 17 00:00:00 2001
From: Andrew Kiernan <apkiernan@gmail.com>
Date: Sun, 16 Aug 2015 20:24:40 -0400
Subject: [PATCH] [added] #460 ListGroupItem outputs <button> when an onClick
 handler is set.

---
 docs/examples/ListGroupLinked.js |  8 +++++++-
 src/ListGroup.js                 | 14 ++++++--------
 src/ListGroupItem.js             | 20 ++++++++++++++++----
 test/ListGroupItemSpec.js        |  9 +++++++++
 test/ListGroupSpec.js            |  2 +-
 5 files changed, 39 insertions(+), 14 deletions(-)

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 = (
   <ListGroup>
     <ListGroupItem href='#link1'>Link 1</ListGroupItem>
     <ListGroupItem href='#link2'>Link 2</ListGroupItem>
-    <ListGroupItem href='#linkN'>...</ListGroupItem>
+    <ListGroupItem onClick={alertClicked}>
+      Trigger an alert
+    </ListGroupItem>
   </ListGroup>
 );
 
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 (
-      <SafeAnchor
+      <a
         {...this.props}
         className={classNames(this.props.className, classes)}
       >
         {this.props.header ? this.renderStructuredContent() : this.props.children}
-      </SafeAnchor>
+      </a>
+    );
+  },
+
+  renderButton(classes) {
+    return (
+      <button 
+        type='button'
+        {...this.props}
+        className={classNames(this.props.className, classes)}>
+        {this.props.children}
+      </button>
     );
   },
 
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(
+      <ListGroupItem onClick={noop}>Button</ListGroupItem>
+    );
+    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(
       <ListGroupItem listItem>Item 1</ListGroupItem>
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 () {
       </ListGroup>
     );
     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'));
   });