Merge pull request #4330 from dmitrylyzo/fix-navigation-input

Fix navigation for some types of INPUT

src/scripts/keyboardNavigation.js

@@ -50,6 +50,11 @@ const NavigationKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
  */
 const InteractiveElements = ['INPUT', 'TEXTAREA'];
 
+/**
+ * Types of INPUT element for which navigation shouldn't be constrained.
+ */
+const NonInteractiveInputElements = ['button', 'checkbox', 'color', 'file', 'hidden', 'image', 'radio', 'reset', 'submit'];
+
 let hasFieldKey = false;
 try {
     hasFieldKey = 'key' in new KeyboardEvent('keydown');
@@ -84,6 +89,24 @@ export function isNavigationKey(key) {
     return NavigationKeys.indexOf(key) != -1;
 }
 
+/**
+ * Returns _true_ if the element is interactive.
+ *
+ * @param {Element} element - Element.
+ * @return {boolean} _true_ if the element is interactive.
+ */
+export function isInteractiveElement(element) {
+    if (element && InteractiveElements.includes(element.tagName)) {
+        if (element.tagName === 'INPUT') {
+            return !NonInteractiveInputElements.includes(element.type);
+        }
+
+        return true;
+    }
+
+    return false;
+}
+
 export function enable() {
     window.addEventListener('keydown', function (e) {
         const key = getKeyName(e);
@@ -97,7 +120,7 @@ export function enable() {
 
         switch (key) {
             case 'ArrowLeft':
-                if (!InteractiveElements.includes(document.activeElement?.tagName)) {
+                if (!isInteractiveElement(document.activeElement)) {
                     inputManager.handleCommand('left');
                 } else {
                     capture = false;
@@ -107,7 +130,7 @@ export function enable() {
                 inputManager.handleCommand('up');
                 break;
             case 'ArrowRight':
-                if (!InteractiveElements.includes(document.activeElement?.tagName)) {
+                if (!isInteractiveElement(document.activeElement)) {
                     inputManager.handleCommand('right');
                 } else {
                     capture = false;