support scrollIntoView. Fixes #3

HISTORY.md

@@ -3,6 +3,8 @@
 
 generated by https://github.com/yiminghe/gh-history
 
-## 2.1.0 / 2015-01-28
+## 2.2.0 / 2015-01-29
+
+`new` [#3](https://github.com/react-component/menu/issues/3) support scrollIntoView if menu is scrollable
 
 `new` [#2](https://github.com/react-component/menu/issues/2) support multiple prop and onDeselect callback

examples/index.md

@@ -10,6 +10,11 @@
 .menu-container{
   margin: 20px 40px;
 }
+#long .rc-menu {
+  height: 200px;
+  width:200px;
+  overflow:auto;
+}
 </style>
 
 
@@ -26,6 +31,13 @@ multiple select
 </div>
 </div>
 </div>
+</div>
+
+<div>
+scrollable menu <input value='for focus'/>
+<div id='long'>
+</div>
+</div>
 
 
 ````js
@@ -52,6 +64,14 @@ var single = document.getElementById('single');
 render(false,single);
 render(true,multiple);
 
+
+var children = [];
+for(var i=0;i<20;i++){
+  children.push(<MenuItem>{i}</MenuItem>);
+}
+React.render(<Menu>{children}</Menu>,document.getElementById('long'));
+
+
 function render(multiple,container){
   var leftMenu = (
     <Menu multiple={multiple} onSelect={handleSelect} onDeselect={handleDeselect}>

lib/Menu.js

@@ -8,6 +8,7 @@ var createChainedFunction = require('./utils/createChainedFunction');
 var assign = require("./utils/Object.assign");
 var util = require('./utils/util');
 var KeyCode = util.KeyCode;
+var scrollIntoView = require('dom-scroll-into-view');
 
 function getActiveKey(props) {
   var activeKey = props.activeKey;
@@ -104,6 +105,10 @@ var Menu = React.createClass({
       e.preventDefault();
       this.setState({
         activeKey: activeKey
+      }, function () {
+        scrollIntoView(self.refs[activeKey].getDOMNode(), self.getDOMNode(), {
+          onlyScrollIfNeeded: true
+        });
       });
       return true;
     }
@@ -239,12 +244,11 @@ var Menu = React.createClass({
 
   renderMenuItem: function (child) {
     var key = child.props.eventKey;
-    var ref = child.ref || util.guid();
     var state = this.state;
     var props = this.props;
     var baseProps = {
       rootPrefixCls: props.prefixCls,
-      ref: ref,
+      ref: key,
       key: key
     };
     var childProps = child.props;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-menu",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "menu ui component for react",
   "keywords": [
     "react",
@@ -25,7 +25,8 @@
   "spm": {
     "buildArgs": "--global react:window.React",
     "dependencies": {
-      "react": "~0.12.1"
+      "react": "*",
+      "dom-scroll-into-view": "^1.0.1"
     },
     "devDependencies": {
       "font-awesome": "~4.2.0"
@@ -44,6 +45,11 @@
     "browser-test": "rc-tools run browser-test",
     "browser-test-cover": "rc-tools run browser-test-cover"
   },
+  "dependencies": {
+    "browserify-jsx": "^0.1.0",
+    "browserify-shim": "^3.8.0",
+    "dom-scroll-into-view": "^1.0.1"
+  },
   "devDependencies": {
     "expect.js": "~0.3.1",
     "font-awesome": "~4.2.0",
@@ -69,9 +75,5 @@
         "browserify-shim"
       ]
     ]
-  },
-  "dependencies": {
-    "browserify-shim": "^3.8.0",
-    "browserify-jsx": "^0.1.0"
   }
-}
+}