Restore focusPreventScroll

package.json

@@ -62,7 +62,6 @@
     "epubjs": "^0.3.85",
     "fast-text-encoding": "^1.0.3",
     "flv.js": "^1.5.0",
-    "focus-options-polyfill": "^1.5.0",
     "headroom.js": "^0.11.0",
     "hls.js": "^0.14.8",
     "howler": "^2.2.0",

src/bundle.js

@@ -10,11 +10,6 @@ _define('fetch', function() {
     return fetch;
 });
 
-var focusPreventScroll = require('focus-options-polyfill');
-_define('focus-options-polyfill', function() {
-    return focusPreventScroll;
-});
-
 // Blurhash
 const blurhash = require('blurhash');
 _define('blurhash', function() {

src/elements/emby-scroller/emby-scroller.js

@@ -17,12 +17,10 @@ import 'css!./emby-scroller';
 
     function initCenterFocus(elem, scrollerInstance) {
         dom.addEventListener(elem, 'focus', function (e) {
-            setTimeout(function() {
+            const focused = focusManager.focusableParent(e.target);
-                const focused = focusManager.focusableParent(e.target);
+            if (focused) {
-                if (focused) {
+                scrollerInstance.toCenter(focused);
-                    scrollerInstance.toCenter(focused);
+            }
-                }
-            }, 0);
         }, {
             capture: true,
             passive: true

src/legacy/focusPreventScroll.js

@@ -0,0 +1,42 @@
+// Polyfill to add support for preventScroll by focus function
+
+if (HTMLElement.prototype.nativeFocus === undefined) {
+    (function () {
+        var supportsPreventScrollOption = false;
+        try {
+            var focusElem = document.createElement('div');
+
+            focusElem.addEventListener('focus', function(event) {
+                event.preventDefault();
+                event.stopPropagation();
+            }, true);
+
+            var opts = Object.defineProperty({}, 'preventScroll', {
+                // eslint-disable-next-line getter-return
+                get: function () {
+                    supportsPreventScrollOption = true;
+                }
+            });
+
+            focusElem.focus(opts);
+        } catch (e) {
+            console.error('error checking preventScroll support');
+        }
+
+        if (!supportsPreventScrollOption) {
+            HTMLElement.prototype.nativeFocus = HTMLElement.prototype.focus;
+
+            HTMLElement.prototype.focus = function(options) {
+                var scrollX = window.scrollX;
+                var scrollY = window.scrollY;
+
+                this.nativeFocus();
+
+                // Restore window scroll if preventScroll
+                if (options && options.preventScroll) {
+                    window.scroll(scrollX, scrollY);
+                }
+            };
+        }
+    })();
+}

src/scripts/site.js

@@ -221,6 +221,7 @@ function initClient() {
                     keyboardnavigation.enable();
                 });
                 require(['mouseManager']);
+                require(['focusPreventScroll']);
                 require(['autoFocuser'], function(autoFocuser) {
                     autoFocuser.enable();
                 });
@@ -462,6 +463,7 @@ function initClient() {
             datetime: 'scripts/datetime',
             globalize: 'scripts/globalize',
             dfnshelper: 'scripts/dfnshelper',
+
             libraryMenu: 'scripts/libraryMenu',
             playlisteditor: componentsPath + '/playlisteditor/playlisteditor',
             medialibrarycreator: componentsPath + '/mediaLibraryCreator/mediaLibraryCreator',
@@ -520,8 +522,7 @@ function initClient() {
                     'events',
                     'credentialprovider',
                     'connectionManagerFactory',
-                    'appStorage',
+                    'appStorage'
-                    'focus-options-polyfill'
                 ]
             },
             urlArgs: urlArgs,
@@ -530,7 +531,7 @@ function initClient() {
         });
 
         promise = require(['fetch'])
-            .then(() => require(['jQuery', 'polyfill', 'fast-text-encoding', 'intersection-observer', 'classlist-polyfill', 'focus-options-polyfill', 'css!assets/css/site', 'jellyfin-noto'], (jQuery) => {
+            .then(() => require(['jQuery', 'polyfill', 'fast-text-encoding', 'intersection-observer', 'classlist-polyfill', 'css!assets/css/site', 'jellyfin-noto'], (jQuery) => {
                 // Expose jQuery globally
                 window.$ = jQuery;
                 window.jQuery = jQuery;
@@ -650,6 +651,7 @@ function initClient() {
             return viewManager;
         });
         define('slideshow', [componentsPath + '/slideshow/slideshow'], returnFirstDependency);
+        define('focusPreventScroll', ['legacy/focusPreventScroll'], returnFirstDependency);
         define('userdataButtons', [componentsPath + '/userdatabuttons/userdatabuttons'], returnFirstDependency);
         define('listView', [componentsPath + '/listview/listview'], returnFirstDependency);
         define('indicators', [componentsPath + '/indicators/indicators'], returnFirstDependency);

yarn.lock

@@ -4598,11 +4598,6 @@ flv.js@^1.5.0:
     es6-promise "^4.2.5"
     webworkify "^1.5.0"
 
-focus-options-polyfill@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/focus-options-polyfill/-/focus-options-polyfill-1.5.0.tgz#fd2e6a0d6d8f828346726a5adf02f3d2bdfece5f"
-  integrity sha512-HiMSaXGUz2OFjOuoGTWXlp+YjZCGnVXPu6vPeccgaSOzGmqLVz8tJRcKXWfMJnj16LXf/IM1rJI0zrZMVc9q7g==
-
 follow-redirects@1.5.10:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"