[fixed] ListGroup rendering a ul when ListGroupItem has onClick handler

remove props.target check in ListGroup and ListGroupItem
prime-time · Apr 27, 2015 · b86e03e · b86e03e
1 parent dd0c028
commit b86e03e
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/ListGroup.js b/src/ListGroup.js
@@ -16,14 +16,15 @@ class ListGroup extends React.Component {
     } else if (React.Children.count(this.props.children) === 1 && !Array.isArray(this.props.children)) {
       let child = this.props.children;
 
-      childrenAnchors = child.props.href ? true : false;
+      childrenAnchors = this.isAnchor(child.props);
 
     } else {
 
       childrenAnchors = Array.prototype.some.call(this.props.children, (child) => {
-        return !Array.isArray(child) ? child.props.href : Array.prototype.some.call(child, (subChild) => {
-            return subChild.props.href;
+        return !Array.isArray(child) ? this.isAnchor(child.props) : Array.prototype.some.call(child, (subChild) => {
+            return this.isAnchor(subChild.props);
         });
+
       });
 
     }
@@ -35,6 +36,10 @@ class ListGroup extends React.Component {
     }
   }
 
+  isAnchor(props){
+    return (props.href || props.onClick);
+  }
+
   renderUL(items) {
     let listItems = ValidComponentChildren.map(items,
       (item, index) => cloneElement(item, { listItem: true })

diff --git a/src/ListGroupItem.js b/src/ListGroupItem.js
@@ -31,7 +31,7 @@ const ListGroupItem = React.createClass({
     classes.active = this.props.active;
     classes.disabled = this.props.disabled;
 
-    if (this.props.href || this.props.target || this.props.onClick) {
+    if (this.props.href || this.props.onClick) {
       return this.renderAnchor(classes);
     } else if (this.props.listItem) {
       return this.renderLi(classes);

diff --git a/test/ListGroupSpec.js b/test/ListGroupSpec.js
@@ -120,4 +120,20 @@ describe('ListGroup', function () {
     assert.equal(React.findDOMNode(instance).lastChild.nodeName, 'SPAN');
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group'));
   });
+
+
+
+  it('Should output a "div" when "ListGroupItem" children have an onClick handler', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ListGroup>
+        <ListGroupItem onClick={() => null}>1st Child</ListGroupItem>
+        <ListGroupItem>2nd Child</ListGroupItem>
+      </ListGroup>
+    );
+    assert.equal(React.findDOMNode(instance).nodeName, 'DIV');
+    assert.equal(React.findDOMNode(instance).firstChild.nodeName, 'A');
+    assert.equal(React.findDOMNode(instance).lastChild.nodeName, 'SPAN');
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group'));
+  });
+
 });