milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
Fix navigation for some types of INPUT

Original-merge: 7e99e3ec515d9a461358b5053da0c78a9f452e8d

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

Backported-by: crobibero <cody@robibe.ro>
This commit is contained in:
Dmitry Lyzo 2023-03-09 19:43:06 -05:00 • committed by crobibero
parent 339311008e
commit 8dbf40fa0a
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;