mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

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

Browse source 
Fix navigation for some types of INPUT
This commit is contained in:
Bill Thornton 2023-02-27 10:33:01 -05:00 • committed by GitHub
commit 7e99e3ec51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/scripts/keyboardNavigation.js
View file

@ -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;