From e580f0c8695f4e28873b3ecc494178b0718cbb61 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sun, 5 Feb 2023 17:25:42 +0300
Subject: [PATCH] Fix navigation for some types of INPUT

Regression from 36fce00270230dabacb03b757144afb149e37805
---
 src/scripts/keyboardNavigation.js | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js
index feef180630..39c187479d 100644
--- a/src/scripts/keyboardNavigation.js
+++ b/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;