Merge pull request #67 from NoriginMedia/throttle-fast-clicking

Allow throttle for key pressing

Author: JakubKubista

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.12.3]
+### Changed
+- added `throttleKeypresses` to prevent canceling of throttled events for individual key presses
+
 ## [2.12.2]
 ### Changed
 - update layouts at the beginning of smartNavigate instead of after setFocus

README.md

@@ -206,6 +206,11 @@ Enable to throttle the function fired by the event listener.
 
 * **0 (default)**
 
+##### `throttleKeypresses`: boolean
+Prevent canceling of throttled events for individual key presses. Works only in combination with `throttle`. Useful when there are issues with the performance of handling rapidly firing navigational events.
+
+* **false (default)**
+
 ### `setKeyMap`: function
 Function to set custom key codes.
 ```jsx

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@noriginmedia/react-spatial-navigation",
-  "version": "2.12.2",
+  "version": "2.12.3",
   "description": "HOC-based Spatial Navigation (key navigation) solution for React",
   "main": "dist/index.js",
   "files": [

package.json

@@ -291,6 +291,7 @@ class SpatialNavigation {
     this.enabled = false;
     this.nativeMode = false;
     this.throttle = 0;
+    this.throttleKeypresses = false;
 
     this.pressedKeys = {};
 
@@ -322,11 +323,13 @@ class SpatialNavigation {
     debug: debug = false,
     visualDebug: visualDebug = false,
     nativeMode: nativeMode = false,
-    throttle: throttle = 0
+    throttle: throttle = 0,
+    throttleKeypresses: throttleKeypresses = false
   } = {}) {
     if (!this.enabled) {
       this.enabled = true;
       this.nativeMode = nativeMode;
+      this.throttleKeypresses = throttleKeypresses;
 
       this.debug = debug;
 
@@ -366,6 +369,7 @@ class SpatialNavigation {
       this.enabled = false;
       this.nativeMode = false;
       this.throttle = 0;
+      this.throttleKeypresses = false;
       this.focusKey = null;
       this.parentsHavingFocusedChild = [];
       this.focusableComponents = {};
@@ -434,7 +438,7 @@ class SpatialNavigation {
 
         Reflect.deleteProperty(this.pressedKeys, eventType);
 
-        if (this.throttle) {
+        if (this.throttle && !this.throttleKeypresses) {
           this.keyDownEventListener.cancel();
         }
       };