Backport pull request #4166 from jellyfin/release-10.8.z

Fix keyboard navigation for INPUT and TEXTAREA

Original-merge: 4f3ac34739

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

Backported-by: Joshua M. Boniface <joshua@boniface.me>
This commit is contained in:
Dmitry Lyzo 2022-11-29 13:41:42 -05:00 committed by Joshua M. Boniface
parent 4167f04900
commit be3a46009c

View File

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