fix submenu mouseenter

Author: yiminghe

examples/index.md

@@ -29,12 +29,19 @@ function handleSelect(selectedKey) {
   console.log('selected ' + selectedKey);
 }
 
+var titleRight = <span>sub menu <i className="fa fa-caret-right pull-right"></i></span>;
 var titleRight1 = <span>sub menu 1 <i className="fa fa-caret-right pull-right"></i></span>;
 var titleRight2 = <span>sub menu 2 <i className="fa fa-caret-right pull-right"></i></span>;
 var titleRight3 = <span>sub menu 3 <i className="fa fa-caret-right pull-right"></i></span>;
 
 var leftMenu = (
   <Menu activeKey="11110" onSelect={handleSelect}>
+    <SubMenu title={titleRight}>
+      <Menu>
+        <MenuItem>0-1</MenuItem>
+        <MenuItem>0-2</MenuItem>
+      </Menu>
+    </SubMenu>
     <MenuItem key="10">1</MenuItem>
     <MenuItem key="31">outer</MenuItem>
     <SubMenu title={titleRight1}>

lib/SubMenu.js

@@ -86,10 +86,6 @@ var SubMenu = React.createClass({
     }
   },
 
-  handleMouseLeave: function () {
-    this.props.onHover(null);
-  },
-
   handleMouseEnter: function () {
     var props = this.props;
     props.onHover(props.eventKey);
@@ -98,6 +94,12 @@ var SubMenu = React.createClass({
     }
   },
 
+  handleMouseLeave: function () {
+    if (!this.state.open) {
+      this.props.onHover(null);
+    }
+  },
+
   handleClick: function () {
     this.setOpenState(true);
   },
@@ -117,19 +119,24 @@ var SubMenu = React.createClass({
     classes[prefixCls] = true;
     var clickEvents = {};
     var mouseEvents = {};
+    var titleMouseEvents = {};
     if (!props.disabled) {
       clickEvents = {
         onClick: this.handleClick
       };
       mouseEvents = {
+        onMouseLeave: this.handleMouseLeave
+      };
+      // only works in title, not outer li
+      titleMouseEvents = {
         onMouseEnter: this.handleMouseEnter
       };
     }
     return (
-      <li className={joinClasses(props.className, classSet(classes))}>
+      <li className={joinClasses(props.className, classSet(classes))}  {...mouseEvents}>
         <div
           className={prefixCls + '-title'}
-          {...mouseEvents}
+          {...titleMouseEvents}
           {...clickEvents}
           aria-expanded={props.active}
           aria-owns={this._menuId}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-menu",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "menu ui component for react",
   "keywords": [
     "react",