diff --git a/src/elements/emby-tabs/emby-tabs.js b/src/elements/emby-tabs/emby-tabs.js index db7ad56f5d..7e16e31dd4 100644 --- a/src/elements/emby-tabs/emby-tabs.js +++ b/src/elements/emby-tabs/emby-tabs.js @@ -12,7 +12,7 @@ import 'scrollStyles'; const buttonClass = 'emby-tab-button'; const activeButtonClass = buttonClass + '-active'; - function setActiveTabButton(tabs, newButton, oldButton, animate) { + function setActiveTabButton(newButton) { newButton.classList.add(activeButtonClass); } @@ -77,7 +77,7 @@ import 'scrollStyles'; const previousIndex = current ? parseInt(current.getAttribute('data-index')) : null; - setActiveTabButton(tabs, tabButton, current, true); + setActiveTabButton(tabButton); const index = parseInt(tabButton.getAttribute('data-index')); @@ -101,6 +101,15 @@ import 'scrollStyles'; } } + function onFocusOut(e) { + const parentContainer = e.target.parentNode; + const previousFocus = parentContainer.querySelector('.lastFocused'); + if (previousFocus) { + previousFocus.classList.remove('lastFocused'); + } + e.target.classList.add('lastFocused'); + } + function initScroller(tabs) { if (tabs.scroller) { return; @@ -146,13 +155,18 @@ import 'scrollStyles'; dom.addEventListener(this, 'click', onClick, { passive: true }); + + dom.addEventListener(this, 'focusout', onFocusOut); }; - EmbyTabs.focus = function () { - const selected = this.querySelector('.' + activeButtonClass); + EmbyTabs.focus = function onFocusIn() { + const selectedTab = this.querySelector('.' + activeButtonClass); + const lastFocused = this.querySelector('.lastFocused'); - if (selected) { - focusManager.focus(selected); + if (lastFocused) { + focusManager.focus(lastFocused); + } else if (selectedTab) { + focusManager.focus(selectedTab); } else { focusManager.autoFocus(this); } @@ -178,7 +192,7 @@ import 'scrollStyles'; const newTabButton = tabButtons[currentIndex]; if (newTabButton) { - setActiveTabButton(this, newTabButton, current, false); + setActiveTabButton(newTabButton); } } @@ -226,7 +240,7 @@ import 'scrollStyles'; })); const currentTabButton = tabButtons[current]; - setActiveTabButton(tabs, tabButtons[selected], currentTabButton, false); + setActiveTabButton(tabButtons[selected]); if (current !== selected && currentTabButton) { currentTabButton.classList.remove(activeButtonClass);