From 53c6c23a380621e1ed79a2e8a481fded483077ab Mon Sep 17 00:00:00 2001 From: Christophe de Vienne Date: Fri, 15 Jan 2016 12:10:39 +0100 Subject: [PATCH 1/2] Call setMenuPositions() on scroll & resize --- lib/Autocomplete.js | 14 ++++++++++++++ package.json | 5 +++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/lib/Autocomplete.js b/lib/Autocomplete.js index daceb0ed..681070d7 100644 --- a/lib/Autocomplete.js +++ b/lib/Autocomplete.js @@ -1,5 +1,6 @@ const React = require('react') const scrollIntoView = require('dom-scroll-into-view') +const throttle = require('lodash/throttle') let _debugStates = [] @@ -51,6 +52,12 @@ let Autocomplete = React.createClass({ this._performAutoCompleteOnKeyUp = false }, + componentDidMount () { + this.setMenuPositionsThrottled = throttle(this.setMenuPositions.bind(this), 16); + window.addEventListener('resize', this.setMenuPositionsThrottled); + window.addEventListener('scroll', this.setMenuPositionsThrottled); + }, + componentWillReceiveProps () { this._performAutoCompleteOnUpdate = true }, @@ -67,6 +74,13 @@ let Autocomplete = React.createClass({ this.maybeScrollItemIntoView() }, + componentWillUnmount () { + window.removeEventListener('resize', this.setMenuPositionsThrottled); + window.removeEventListener('scroll', this.setMenuPositionsThrottled); + this.setMenuPositionsThrottled.clear(); + this.setMenuPositionsThrottled = null; + }, + maybeScrollItemIntoView () { if (this.state.isOpen === true && this.state.highlightedIndex !== null) { var itemNode = React.findDOMNode(this.refs[`item-${this.state.highlightedIndex}`]) diff --git a/package.json b/package.json index a393dcd1..212c2723 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ ], "keywords": [], "dependencies": { - "dom-scroll-into-view": "1.0.1" + "dom-scroll-into-view": "1.0.1", + "lodash": "^4.0.0" } -} \ No newline at end of file +} From 732f7703af26c96ca828551f5fc2aa6e5049e91a Mon Sep 17 00:00:00 2001 From: Christophe de Vienne Date: Wed, 20 Jan 2016 11:07:55 +0100 Subject: [PATCH 2/2] [fixed] componentWillUnmount crashes lodash throttle has a 'cancel' (not 'clear') method to clear pending calls. --- lib/Autocomplete.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/Autocomplete.js b/lib/Autocomplete.js index 681070d7..60922c35 100644 --- a/lib/Autocomplete.js +++ b/lib/Autocomplete.js @@ -77,7 +77,7 @@ let Autocomplete = React.createClass({ componentWillUnmount () { window.removeEventListener('resize', this.setMenuPositionsThrottled); window.removeEventListener('scroll', this.setMenuPositionsThrottled); - this.setMenuPositionsThrottled.clear(); + this.setMenuPositionsThrottled.cancel(); this.setMenuPositionsThrottled = null; },