diff --git a/src/components/scrollManager.js b/src/components/scrollManager.js index a11f1448eb..13ff164e7e 100644 --- a/src/components/scrollManager.js +++ b/src/components/scrollManager.js @@ -223,8 +223,9 @@ import layoutManager from './layoutManager'; let parent = element.parentElement; while (parent) { - // Skip 'emby-scroller' because it scrolls by itself + // Skip 'emby-scroller' and 'emby-tabs' because they scroll by themselves if (!parent.classList.contains('emby-scroller') && + !parent.classList.contains('emby-tabs') && parent[nameScroll] > parent[nameClient] && parent.classList.contains(nameClass)) { return parent; } diff --git a/src/elements/emby-tabs/emby-tabs.js b/src/elements/emby-tabs/emby-tabs.js index 9f259fe00a..ce1fcee05d 100644 --- a/src/elements/emby-tabs/emby-tabs.js +++ b/src/elements/emby-tabs/emby-tabs.js @@ -3,6 +3,7 @@ import dom from '../../scripts/dom'; import scroller from '../../libraries/scroller'; import browser from '../../scripts/browser'; import focusManager from '../../components/focusManager'; +import layoutManager from '../../components/layoutManager'; import './emby-tabs.scss'; import '../../assets/css/scrollstyles.scss'; @@ -100,6 +101,14 @@ import '../../assets/css/scrollstyles.scss'; } } + function onFocusIn(e) { + const tabs = this; + const tabButton = dom.parentWithClass(e.target, buttonClass); + if (tabButton && tabs.scroller) { + tabs.scroller.toCenter(tabButton, false); + } + } + function onFocusOut(e) { const parentContainer = e.target.parentNode; const previousFocus = parentContainer.querySelector('.lastFocused'); @@ -155,10 +164,14 @@ import '../../assets/css/scrollstyles.scss'; passive: true }); + if (layoutManager.tv) { + dom.addEventListener(this, 'focusin', onFocusIn, { passive: true }); + } + dom.addEventListener(this, 'focusout', onFocusOut); }; - EmbyTabs.focus = function onFocusIn() { + EmbyTabs.focus = function () { const selectedTab = this.querySelector('.' + activeButtonClass); const lastFocused = this.querySelector('.lastFocused'); @@ -210,6 +223,10 @@ import '../../assets/css/scrollstyles.scss'; dom.removeEventListener(this, 'click', onClick, { passive: true }); + + if (layoutManager.tv) { + dom.removeEventListener(this, 'focusin', onFocusIn, { passive: true }); + } }; function getSelectedTabButton(elem) {