fix: Fix scroll into view and update dependencies

Author: HriBB

package.json

@@ -45,55 +45,55 @@
   },
   "homepage": "https://hribb.github.io/react-mdl-extra/",
   "peerDependencies": {
-    "react-mdl": "^1.7.2"
+    "react-mdl": "^1.9.0"
   },
   "devDependencies": {
-    "@kadira/storybook": "^2.29.7",
+    "@kadira/storybook": "^2.35.2",
     "@kadira/storybook-deployer": "^1.2.0",
-    "autoprefixer": "^6.5.3",
+    "autoprefixer": "^6.6.1",
     "babel-cli": "^6.18.0",
-    "babel-core": "^6.18.2",
-    "babel-eslint": "^7.1.0",
-    "babel-loader": "^6.2.7",
+    "babel-core": "^6.21.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-0": "^6.16.0",
     "chai": "^3.5.0",
-    "cross-env": "^3.1.3",
-    "css-loader": "^0.25.0",
-    "enzyme": "^2.6.0",
-    "eslint": "^3.10.0",
+    "cross-env": "^3.1.4",
+    "css-loader": "^0.26.1",
+    "enzyme": "^2.7.0",
+    "eslint": "^3.13.0",
     "eslint-loader": "^1.6.1",
-    "eslint-plugin-react": "^6.6.0",
+    "eslint-plugin-react": "^6.9.0",
     "expect": "^1.20.2",
     "extract-text-webpack-plugin": "^1.0.1",
     "faker": "^3.1.0",
-    "ghooks": "^1.3.2",
-    "html-webpack-plugin": "^2.24.1",
+    "ghooks": "^2.0.0",
+    "html-webpack-plugin": "^2.26.0",
     "html-webpack-plugin-remove": "0.0.2",
     "isparta": "^4.0.0",
     "istanbul": "^1.1.0-alpha.1",
-    "jsdom": "^9.8.3",
-    "mocha": "^3.1.2",
-    "node-sass": "^3.11.3",
+    "jsdom": "^9.9.1",
+    "mocha": "^3.2.0",
+    "node-sass": "^4.2.0",
     "normalize.css": "^5.0.0",
-    "postcss": "^5.2.5",
-    "postcss-loader": "^1.1.1",
+    "postcss": "^5.2.9",
+    "postcss-loader": "^1.2.1",
     "rimraf": "^2.5.4",
-    "sass-loader": "^4.0.2",
-    "semantic-release": "^4.3.5",
-    "sinon": "^1.17.6",
+    "sass-loader": "^4.1.1",
+    "semantic-release": "^6.3.2",
+    "sinon": "^1.17.7",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
-    "webpack": "^1.13.3"
+    "webpack": "^1.14.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "react": "^15.4.0",
-    "react-dom": "^15.4.0",
-    "react-mdl": "^1.7.2",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-mdl": "^1.9.0",
     "react-portal": "^3.0.0",
-    "tether": "^1.3.7"
+    "tether": "^1.4.0"
   }
 }

src/OptionList/OptionList.js

@@ -30,17 +30,26 @@ export default class OptionList extends Component {
   }
 
   componentDidMount() {
+    // add keydown event listener
     document.addEventListener('keydown', this.keyDown, true)
     // scroll into view
     if (!this.props.value) return // no value
-    const parent = this.list.parentNode
-    if (parent.clientHeight >= parent.scrollHeight) return // no scroller
-    const [selected] = this.list.getElementsByClassName('mdl-option--selected')
-    parent.scrollTop = selected.offsetTop - (parent.clientHeight / 2)
+    this.scrollTimeout = setTimeout(() => {
+      this.scrollTimeout = null
+      if (this.list.scrollHeight > this.list.offsetHeight) {
+        const [selected] = this.list.getElementsByClassName('mdl-option--selected')
+        this.list.scrollTop = selected.offsetTop - (this.list.clientHeight / 2)
+      }
+    })
   }
 
   componentWillUnmount() {
+    // remove event listener
     document.removeEventListener('keydown', this.keyDown, true)
+    // clear scroll timeout if necessary
+    if (this.scrollTimeout) {
+      clearTimeout(this.scrollTimeout)
+    }
   }
 
   render() {