From be3a46009c7fa89a3bd1eccdd9cd5f6edd2e66c4 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Tue, 29 Nov 2022 13:41:42 -0500
Subject: [PATCH] Backport pull request #4166 from jellyfin/release-10.8.z

Fix keyboard navigation for INPUT and TEXTAREA

Original-merge: 4f3ac34739d39e6ac5131812e38ee52451cc4444

Merged-by: Bill Thornton <thornbill@users.noreply.github.com>

Backported-by: Joshua M. Boniface <joshua@boniface.me>
---
 src/scripts/keyboardNavigation.js | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/scripts/keyboardNavigation.js b/src/scripts/keyboardNavigation.js
index f175bc2524..3ec0299cc9 100644
--- a/src/scripts/keyboardNavigation.js
+++ b/src/scripts/keyboardNavigation.js
@@ -44,6 +44,11 @@ const KeyNames = {
  */
 const NavigationKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
 
+/**
+ * Elements for which navigation should be constrained.
+ */
+const InteractiveElements = ['INPUT', 'TEXTAREA'];
+
 let hasFieldKey = false;
 try {
     hasFieldKey = 'key' in new KeyboardEvent('keydown');
@@ -91,13 +96,21 @@ export function enable() {
 
         switch (key) {
             case 'ArrowLeft':
-                inputManager.handleCommand('left');
+                if (!InteractiveElements.includes(document.activeElement?.tagName)) {
+                    inputManager.handleCommand('left');
+                } else {
+                    capture = false;
+                }
                 break;
             case 'ArrowUp':
                 inputManager.handleCommand('up');
                 break;
             case 'ArrowRight':
-                inputManager.handleCommand('right');
+                if (!InteractiveElements.includes(document.activeElement?.tagName)) {
+                    inputManager.handleCommand('right');
+                } else {
+                    capture = false;
+                }
                 break;
             case 'ArrowDown':
                 inputManager.handleCommand('down');