Merge pull request react-bootstrap#1414 from taion/MenuItem-onClick

[fixed] Respect onClick on MenuItem

src/MenuItem.js

@@ -1,7 +1,9 @@
-import React from 'react';
 import classnames from 'classnames';
+import React from 'react';
 import all from 'react-prop-types/lib/all';
+
 import SafeAnchor from './SafeAnchor';
+import createChainedFunction from './utils/createChainedFunction';
 
 export default class MenuItem extends React.Component {
   constructor(props) {
@@ -35,27 +37,25 @@ export default class MenuItem extends React.Component {
       );
     }
 
+    const {className, style, href, onClick, ...props} = this.props;
+
     const classes = {
       disabled: this.props.disabled,
       active: this.props.active
     };
 
     return (
       <li role="presentation"
-        className={classnames(this.props.className, classes)}
-        style={this.props.style}
+        className={classnames(className, classes)}
+        style={style}
       >
         <SafeAnchor
+          {...props}
           role="menuitem"
           tabIndex="-1"
-          id={this.props.id}
-          target={this.props.target}
-          title={this.props.title}
-          href={this.props.href || ''}
-          onKeyDown={this.props.onKeyDown}
-          onClick={this.handleClick}>
-          {this.props.children}
-        </SafeAnchor>
+          href={href || ''}
+          onClick={createChainedFunction(onClick, this.handleClick)}
+        />
       </li>
     );
   }
@@ -80,6 +80,7 @@ MenuItem.propTypes = {
   href: React.PropTypes.string,
   target: React.PropTypes.string,
   title: React.PropTypes.string,
+  onClick: React.PropTypes.func,
   onKeyDown: React.PropTypes.func,
   onSelect: React.PropTypes.func,
   id: React.PropTypes.oneOfType([

test/MenuItemSpec.js

@@ -82,6 +82,21 @@ describe('MenuItem', () => {
     ReactTestUtils.Simulate.click(anchor);
   });
 
+  it('should call custom onClick', () => {
+    const handleClick = sinon.spy();
+    const handleSelect = sinon.spy();
+
+    const instance = ReactTestUtils.renderIntoDocument(
+      <MenuItem onClick={handleClick} onSelect={handleSelect}>Item</MenuItem>
+    );
+    const anchor = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'A');
+
+    ReactTestUtils.Simulate.click(anchor);
+
+    expect(handleClick).to.have.been.called;
+    expect(handleSelect).to.have.been.called;
+  });
+
   it('does not fire onSelect when divider is clicked', () => {
     const handleSelect = () => {
       throw new Error('Should not invoke onSelect with divider flag applied');