diff --git a/CHANGELOG.md b/CHANGELOG.md index 13ccc5f..e6439ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [2.5.0] +### Fixed +- Throttling is now only applied if the throttle option supplied was greater than 0 +### Added +- Key up now flushes any throttled input + ## [2.4.0] ### Added - added support for `onArrowPress` property, it enables to add a custom behavior when arrows are pressed and can prevent the default navigation. diff --git a/dist/spatialNavigation.js b/dist/spatialNavigation.js index 512aa04..5f81e43 100644 --- a/dist/spatialNavigation.js +++ b/dist/spatialNavigation.js @@ -343,7 +343,8 @@ var SpatialNavigation = function () { */ this.paused = false; - this.keyEventListener = null; + this.keyDownEventListener = null; + this.keyUpEventListener = null; this.keyMap = DEFAULT_KEY_MAP; this.onKeyEvent = this.onKeyEvent.bind(this); @@ -429,7 +430,7 @@ var SpatialNavigation = function () { var _this3 = this; if (window) { - this.keyEventListener = function (event) { + this.keyDownEventListener = function (event) { if (_this3.paused === true) { return; } @@ -456,7 +457,7 @@ var SpatialNavigation = function () { var preventDefaultNavigation = _this3.onArrowPress(eventType) === false; if (preventDefaultNavigation) { - _this3.log('keyEventListener', 'default navigation prevented'); + _this3.log('keyDownEventListener', 'default navigation prevented'); _this3.visualDebugger && _this3.visualDebugger.clear(); } else { _this3.onKeyEvent(event.keyCode); @@ -464,15 +465,32 @@ var SpatialNavigation = function () { } }; - window.addEventListener('keydown', (0, _throttle2.default)(this.keyEventListener, this.throttle)); + // Apply throttle only if the option we got is > 0 to avoid limiting the listener to every animation frame + if (this.throttle) { + this.keyDownEventListener = (0, _throttle2.default)(this.keyDownEventListener.bind(this), this.throttle); + + // When throttling then make sure to only throttle key down and flush in the case of key up + this.keyUpEventListener = function () { + return _this3.keyDownEventListener.flush(); + }; + + window.addEventListener('keyup', this.keyUpEventListener); + } + + window.addEventListener('keydown', this.keyDownEventListener); } } }, { key: 'unbindEventHandlers', value: function unbindEventHandlers() { if (window) { - window.removeEventListener('keydown', this.keyEventListener); - this.keyEventListener = null; + window.removeEventListener('keydown', this.keyDownEventListener); + this.keyDownEventListener = null; + + if (this.throttle) { + window.removeEventListener('keyup', this.keyUpEventListener); + this.keyUpEventListener = null; + } } } }, { diff --git a/package-lock.json b/package-lock.json index d35b211..a51c4f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@noriginmedia/react-spatial-navigation", - "version": "2.4.0", + "version": "2.5.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index b4ec279..b5741f4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@noriginmedia/react-spatial-navigation", - "version": "2.4.0", + "version": "2.5.0", "description": "HOC-based Spatial Navigation (key navigation) solution for React", "main": "dist/index.js", "scripts": { diff --git a/src/spatialNavigation.js b/src/spatialNavigation.js index bec0c72..4f3ebed 100644 --- a/src/spatialNavigation.js +++ b/src/spatialNavigation.js @@ -287,7 +287,8 @@ class SpatialNavigation { */ this.paused = false; - this.keyEventListener = null; + this.keyDownEventListener = null; + this.keyUpEventListener = null; this.keyMap = DEFAULT_KEY_MAP; this.onKeyEvent = this.onKeyEvent.bind(this); @@ -363,7 +364,7 @@ class SpatialNavigation { bindEventHandlers() { if (window) { - this.keyEventListener = (event) => { + this.keyDownEventListener = (event) => { if (this.paused === true) { return; } @@ -388,7 +389,7 @@ class SpatialNavigation { const preventDefaultNavigation = this.onArrowPress(eventType) === false; if (preventDefaultNavigation) { - this.log('keyEventListener', 'default navigation prevented'); + this.log('keyDownEventListener', 'default navigation prevented'); this.visualDebugger && this.visualDebugger.clear(); } else { this.onKeyEvent(event.keyCode); @@ -396,14 +397,29 @@ class SpatialNavigation { } }; - window.addEventListener('keydown', lodashThrottle(this.keyEventListener, this.throttle)); + // Apply throttle only if the option we got is > 0 to avoid limiting the listener to every animation frame + if (this.throttle) { + this.keyDownEventListener = lodashThrottle(this.keyDownEventListener.bind(this), this.throttle); + + // When throttling then make sure to only throttle key down and flush in the case of key up + this.keyUpEventListener = () => this.keyDownEventListener.flush(); + + window.addEventListener('keyup', this.keyUpEventListener); + } + + window.addEventListener('keydown', this.keyDownEventListener); } } unbindEventHandlers() { if (window) { - window.removeEventListener('keydown', this.keyEventListener); - this.keyEventListener = null; + window.removeEventListener('keydown', this.keyDownEventListener); + this.keyDownEventListener = null; + + if (this.throttle) { + window.removeEventListener('keyup', this.keyUpEventListener); + this.keyUpEventListener = null; + } } }