pre init focused elements keep the focus after init

packages/overlayscrollbars/dist/browser/overlayscrollbars.browser.es5.js

@@ -1313,8 +1313,9 @@ var OverlayScrollbars = function(r) {
     var V = R(He, f, S);
     var k = V === x;
     var q = k && z;
-    var U = !k && M.top === M && P.activeElement === x;
-    var N = {
+    var U = P.activeElement;
+    var N = !k && M.top === M && U === x;
+    var Z = {
       $: x,
       J: A ? R(He, u, p) : x,
       K: V,
@@ -1336,74 +1337,76 @@ var OverlayScrollbars = function(r) {
         return k ? T(V, na, a, e) : (e ? pr : gr)(V, r);
       }
     };
-    var Z = E(N).reduce((function(r, a) {
-      var e = N[a];
+    var $ = E(Z).reduce((function(r, a) {
+      var e = Z[a];
       return y(r, e && !F(e) ? e : false);
     }), []);
-    var $ = function elementIsGenerated(r) {
-      return r ? m(Z, r) > -1 : null;
+    var J = function elementIsGenerated(r) {
+      return r ? m($, r) > -1 : null;
     };
-    var J = N.$, K = N.J, Q = N.rr, rr = N.K, ar = N.ar, er = N.er;
-    var nr = [];
-    var tr = A && $(K);
-    var vr = A ? J : B([ ar, rr, Q, K, J ].find((function(r) {
-      return false === $(r);
+    var K = Z.$, Q = Z.J, rr = Z.rr, ar = Z.K, er = Z.ar, nr = Z.er;
+    var tr = [];
+    var vr = A && J(Q);
+    var ir = A ? K : B([ er, ar, rr, Q, K ].find((function(r) {
+      return false === J(r);
     })));
-    var ir = ar || rr;
-    var or = function appendElements() {
-      var r = Me(K, k ? "viewport" : "host");
-      var a = pr(Q, fa);
-      var e = pr(rr, !k && la);
-      var t = pr(ar, sa);
+    var or = er || ar;
+    var ur = function appendElements() {
+      var r = Me(Q, k ? "viewport" : "host");
+      var a = pr(rr, fa);
+      var e = pr(ar, !k && la);
+      var t = pr(er, sa);
       var v = z ? pr(F(x), da) : Sr;
-      if (tr) {
-        G(J, K);
-        y(nr, (function() {
-          G(K, J);
-          X(K);
+      if (vr) {
+        G(K, Q);
+        y(tr, (function() {
+          G(Q, K);
+          X(Q);
         }));
       }
-      Y(ir, vr);
-      Y(K, Q);
-      Y(Q || K, !k && rr);
-      Y(rr, ar);
-      y(nr, (function() {
+      Y(or, ir);
+      Y(Q, rr);
+      Y(rr || Q, !k && ar);
+      Y(ar, er);
+      y(tr, (function() {
         v();
         r();
-        D(rr, ta);
-        D(rr, va);
-        if ($(ar)) {
+        D(ar, ta);
+        D(ar, va);
+        if (J(er)) {
+          De(er);
+        }
+        if (J(ar)) {
           De(ar);
         }
-        if ($(rr)) {
+        if (J(rr)) {
           De(rr);
         }
-        if ($(Q)) {
-          De(Q);
-        }
         a();
         e();
         t();
       }));
       if (n && !k) {
-        y(nr, gr.bind(0, rr, da));
+        y(tr, gr.bind(0, ar, da));
       }
-      if (er) {
-        W(rr, er);
-        y(nr, X.bind(0, er));
+      if (nr) {
+        W(ar, nr);
+        y(tr, X.bind(0, nr));
       }
-      if (U) {
-        var i = L(rr, Te);
-        L(rr, Te, "-1");
-        rr.focus();
+      if (N) {
+        var i = L(ar, Te);
+        L(ar, Te, "-1");
+        ar.focus();
         var o = Nr(P, "pointerdown keydown", (function() {
-          i ? L(rr, Te, i) : D(rr, Te);
+          i ? L(ar, Te, i) : D(ar, Te);
           o();
         }));
+      } else if (U && U.focus) {
+        U.focus();
       }
-      vr = 0;
+      ir = 0;
     };
-    return [ N, or, O.bind(0, nr) ];
+    return [ Z, ur, O.bind(0, tr) ];
   };
   var Ie = function createTrinsicUpdateSegment(r, a) {
     var e = r.ar;
@@ -2391,7 +2394,7 @@ var OverlayScrollbars = function(r) {
   var yn = function createScrollbarsSetupEvents(r, a) {
     return function(e, n, t, v, i, o) {
       var u = e.Wr;
-      var f = Cr(500), l = f[0], c = f[1];
+      var f = Cr(333), l = f[0], c = f[1];
       var s = !!i.scrollBy;
       var d = true;
       return O.bind(0, [ Nr(u, "pointerenter", (function() {

packages/overlayscrollbars/dist/browser/overlayscrollbars.browser.es6.js

@@ -1101,8 +1101,9 @@ const OverlayScrollbars = function(t) {
     const C = $(Et, i, v);
     const T = C === p;
     const z = T && m;
-    const I = !T && S.top === S && y.activeElement === p;
-    const M = {
+    const I = y.activeElement;
+    const M = !T && S.top === S && I === p;
+    const R = {
       W: p,
       J: b ? $(Et, l, h) : p,
       K: C,
@@ -1120,70 +1121,72 @@ const OverlayScrollbars = function(t) {
       ut: (t, n) => T ? hasAttrClass(C, O, n) : hasClass(C, t),
       dt: (t, n, o) => T ? attrClass(C, O, n, o) : (o ? addClass : removeClass)(C, t)
     };
-    const R = keys(M).reduce(((t, n) => {
-      const o = M[n];
+    const k = keys(R).reduce(((t, n) => {
+      const o = R[n];
       return push(t, o && !parent(o) ? o : false);
     }), []);
-    const elementIsGenerated = t => t ? indexOf(R, t) > -1 : null;
-    const {W: k, J: B, Z: V, K: j, tt: Y, nt: q} = M;
-    const F = [];
-    const G = b && elementIsGenerated(B);
-    let N = b ? k : contents([ Y, j, V, B, k ].find((t => false === elementIsGenerated(t))));
-    const X = Y || j;
+    const elementIsGenerated = t => t ? indexOf(k, t) > -1 : null;
+    const {W: B, J: V, Z: j, K: Y, tt: q, nt: F} = R;
+    const G = [];
+    const N = b && elementIsGenerated(V);
+    let X = b ? B : contents([ q, Y, j, V, B ].find((t => false === elementIsGenerated(t))));
+    const U = q || Y;
     const appendElements = () => {
-      const t = addDataAttrHost(B, T ? "viewport" : "host");
-      const n = addClass(V, L);
-      const o = addClass(j, !T && H);
-      const e = addClass(Y, P);
+      const t = addDataAttrHost(V, T ? "viewport" : "host");
+      const n = addClass(j, L);
+      const o = addClass(Y, !T && H);
+      const e = addClass(q, P);
       const c = m ? addClass(parent(p), D) : noop;
-      if (G) {
-        insertAfter(k, B);
-        push(F, (() => {
-          insertAfter(B, k);
-          removeElements(B);
+      if (N) {
+        insertAfter(B, V);
+        push(G, (() => {
+          insertAfter(V, B);
+          removeElements(V);
         }));
       }
-      appendChildren(X, N);
-      appendChildren(B, V);
-      appendChildren(V || B, !T && j);
-      appendChildren(j, Y);
-      push(F, (() => {
+      appendChildren(U, X);
+      appendChildren(V, j);
+      appendChildren(j || V, !T && Y);
+      appendChildren(Y, q);
+      push(G, (() => {
         c();
         t();
-        removeAttr(j, E);
-        removeAttr(j, A);
+        removeAttr(Y, E);
+        removeAttr(Y, A);
+        if (elementIsGenerated(q)) {
+          unwrap(q);
+        }
         if (elementIsGenerated(Y)) {
           unwrap(Y);
         }
         if (elementIsGenerated(j)) {
           unwrap(j);
         }
-        if (elementIsGenerated(V)) {
-          unwrap(V);
-        }
         n();
         o();
         e();
       }));
       if (s && !T) {
-        push(F, removeClass.bind(0, j, D));
+        push(G, removeClass.bind(0, Y, D));
       }
-      if (q) {
-        insertBefore(j, q);
-        push(F, removeElements.bind(0, q));
+      if (F) {
+        insertBefore(Y, F);
+        push(G, removeElements.bind(0, F));
       }
-      if (I) {
-        const t = attr(j, Ot);
-        attr(j, Ot, "-1");
-        j.focus();
+      if (M) {
+        const t = attr(Y, Ot);
+        attr(Y, Ot, "-1");
+        Y.focus();
         const n = on(y, "pointerdown keydown", (() => {
-          t ? attr(j, Ot, t) : removeAttr(j, Ot);
+          t ? attr(Y, Ot, t) : removeAttr(Y, Ot);
           n();
         }));
+      } else if (I && I.focus) {
+        I.focus();
       }
-      N = 0;
+      X = 0;
     };
-    return [ M, appendElements, runEachAndClear.bind(0, F) ];
+    return [ R, appendElements, runEachAndClear.bind(0, G) ];
   };
   const createTrinsicUpdateSegment = (t, n) => {
     const {tt: o} = t;
@@ -2129,7 +2132,7 @@ const OverlayScrollbars = function(t) {
   };
   const createScrollbarsSetupEvents = (t, n) => (o, s, e, c, r, l) => {
     const {Gt: i} = o;
-    const [a, u] = selfCancelTimeout(500);
+    const [a, u] = selfCancelTimeout(333);
     const d = !!r.scrollBy;
     let f = true;
     return runEachAndClear.bind(0, [ on(i, "pointerenter", (() => {

packages/overlayscrollbars/dist/overlayscrollbars.cjs.js

@@ -1297,8 +1297,9 @@ const createStructureSetupElements = t => {
   const A = x(Ot, i, v);
   const T = A === p;
   const z = T && m;
-  const H = !T && S.top === S && y.activeElement === p;
-  const D = {
+  const H = y.activeElement;
+  const D = !T && S.top === S && H === p;
+  const R = {
     J: p,
     K: b ? x(Ot, l, h) : p,
     Z: A,
@@ -1316,70 +1317,72 @@ const createStructureSetupElements = t => {
     dt: (t, n) => T ? hasAttrClass(A, C, n) : hasClass(A, t),
     ft: (t, n, o) => T ? attrClass(A, C, n, o) : (o ? addClass : removeClass)(A, t)
   };
-  const R = keys(D).reduce(((t, n) => {
-    const o = D[n];
+  const k = keys(R).reduce(((t, n) => {
+    const o = R[n];
     return push(t, o && !parent(o) ? o : false);
   }), []);
-  const elementIsGenerated = t => t ? indexOf(R, t) > -1 : null;
-  const {J: k, K: B, tt: V, Z: j, nt: Y, ot: q} = D;
-  const F = [];
-  const G = b && elementIsGenerated(B);
-  let N = b ? k : contents([ Y, j, V, B, k ].find((t => false === elementIsGenerated(t))));
-  const X = Y || j;
+  const elementIsGenerated = t => t ? indexOf(k, t) > -1 : null;
+  const {J: B, K: V, tt: j, Z: Y, nt: q, ot: F} = R;
+  const G = [];
+  const N = b && elementIsGenerated(V);
+  let X = b ? B : contents([ q, Y, j, V, B ].find((t => false === elementIsGenerated(t))));
+  const U = q || Y;
   const appendElements = () => {
-    const t = addDataAttrHost(B, T ? "viewport" : "host");
-    const n = addClass(V, I);
-    const o = addClass(j, !T && L);
-    const e = addClass(Y, M);
+    const t = addDataAttrHost(V, T ? "viewport" : "host");
+    const n = addClass(j, I);
+    const o = addClass(Y, !T && L);
+    const e = addClass(q, M);
     const c = m ? addClass(parent(p), P) : noop;
-    if (G) {
-      insertAfter(k, B);
-      push(F, (() => {
-        insertAfter(B, k);
-        removeElements(B);
+    if (N) {
+      insertAfter(B, V);
+      push(G, (() => {
+        insertAfter(V, B);
+        removeElements(V);
       }));
     }
-    appendChildren(X, N);
-    appendChildren(B, V);
-    appendChildren(V || B, !T && j);
-    appendChildren(j, Y);
-    push(F, (() => {
+    appendChildren(U, X);
+    appendChildren(V, j);
+    appendChildren(j || V, !T && Y);
+    appendChildren(Y, q);
+    push(G, (() => {
       c();
       t();
-      removeAttr(j, O);
-      removeAttr(j, E);
+      removeAttr(Y, O);
+      removeAttr(Y, E);
+      if (elementIsGenerated(q)) {
+        unwrap(q);
+      }
       if (elementIsGenerated(Y)) {
         unwrap(Y);
       }
       if (elementIsGenerated(j)) {
         unwrap(j);
       }
-      if (elementIsGenerated(V)) {
-        unwrap(V);
-      }
       n();
       o();
       e();
     }));
     if (s && !T) {
-      push(F, removeClass.bind(0, j, P));
+      push(G, removeClass.bind(0, Y, P));
     }
-    if (q) {
-      insertBefore(j, q);
-      push(F, removeElements.bind(0, q));
+    if (F) {
+      insertBefore(Y, F);
+      push(G, removeElements.bind(0, F));
     }
-    if (H) {
-      const t = attr(j, Ct);
-      attr(j, Ct, "-1");
-      j.focus();
+    if (D) {
+      const t = attr(Y, Ct);
+      attr(Y, Ct, "-1");
+      Y.focus();
       const n = on(y, "pointerdown keydown", (() => {
-        t ? attr(j, Ct, t) : removeAttr(j, Ct);
+        t ? attr(Y, Ct, t) : removeAttr(Y, Ct);
         n();
       }));
+    } else if (H && H.focus) {
+      H.focus();
     }
-    N = 0;
+    X = 0;
   };
-  return [ D, appendElements, runEachAndClear.bind(0, F) ];
+  return [ R, appendElements, runEachAndClear.bind(0, G) ];
 };
 
 const createTrinsicUpdateSegment = (t, n) => {
@@ -2363,7 +2366,7 @@ const createDragScrollingEvents = (t, n, o, s, e, c) => {
 
 const createScrollbarsSetupEvents = (t, n) => (o, s, e, c, r, l) => {
   const {Nt: i} = o;
-  const [a, u] = selfCancelTimeout(500);
+  const [a, u] = selfCancelTimeout(333);
   const d = !!r.scrollBy;
   let f = true;
   return runEachAndClear.bind(0, [ on(i, "pointerenter", (() => {

packages/overlayscrollbars/dist/overlayscrollbars.esm.js

@@ -1286,8 +1286,9 @@ const createStructureSetupElements = t => {
   const A = x(Ot, i, v);
   const T = A === p;
   const z = T && m;
-  const H = !T && S.top === S && y.activeElement === p;
-  const M = {
+  const H = y.activeElement;
+  const M = !T && S.top === S && H === p;
+  const R = {
     W: p,
     J: b ? x(Ot, l, h) : p,
     K: A,
@@ -1305,70 +1306,72 @@ const createStructureSetupElements = t => {
     ut: (t, n) => T ? hasAttrClass(A, C, n) : hasClass(A, t),
     dt: (t, n, o) => T ? attrClass(A, C, n, o) : (o ? addClass : removeClass)(A, t)
   };
-  const R = keys(M).reduce(((t, n) => {
-    const o = M[n];
+  const k = keys(R).reduce(((t, n) => {
+    const o = R[n];
     return push(t, o && !parent(o) ? o : false);
   }), []);
-  const elementIsGenerated = t => t ? indexOf(R, t) > -1 : null;
-  const {W: k, J: B, Z: V, K: Y, tt: j, nt: q} = M;
-  const F = [];
-  const G = b && elementIsGenerated(B);
-  let N = b ? k : contents([ j, Y, V, B, k ].find((t => false === elementIsGenerated(t))));
-  const X = j || Y;
+  const elementIsGenerated = t => t ? indexOf(k, t) > -1 : null;
+  const {W: B, J: V, Z: Y, K: j, tt: q, nt: F} = R;
+  const G = [];
+  const N = b && elementIsGenerated(V);
+  let X = b ? B : contents([ q, j, Y, V, B ].find((t => false === elementIsGenerated(t))));
+  const U = q || j;
   const appendElements = () => {
-    const t = addDataAttrHost(B, T ? "viewport" : "host");
-    const n = addClass(V, I);
-    const o = addClass(Y, !T && L);
-    const e = addClass(j, P);
+    const t = addDataAttrHost(V, T ? "viewport" : "host");
+    const n = addClass(Y, I);
+    const o = addClass(j, !T && L);
+    const e = addClass(q, P);
     const c = m ? addClass(parent(p), D) : noop;
-    if (G) {
-      insertAfter(k, B);
-      push(F, (() => {
-        insertAfter(B, k);
-        removeElements(B);
+    if (N) {
+      insertAfter(B, V);
+      push(G, (() => {
+        insertAfter(V, B);
+        removeElements(V);
       }));
     }
-    appendChildren(X, N);
-    appendChildren(B, V);
-    appendChildren(V || B, !T && Y);
-    appendChildren(Y, j);
-    push(F, (() => {
+    appendChildren(U, X);
+    appendChildren(V, Y);
+    appendChildren(Y || V, !T && j);
+    appendChildren(j, q);
+    push(G, (() => {
       c();
       t();
-      removeAttr(Y, O);
-      removeAttr(Y, E);
+      removeAttr(j, O);
+      removeAttr(j, E);
+      if (elementIsGenerated(q)) {
+        unwrap(q);
+      }
       if (elementIsGenerated(j)) {
         unwrap(j);
       }
       if (elementIsGenerated(Y)) {
         unwrap(Y);
       }
-      if (elementIsGenerated(V)) {
-        unwrap(V);
-      }
       n();
       o();
       e();
     }));
     if (s && !T) {
-      push(F, removeClass.bind(0, Y, D));
+      push(G, removeClass.bind(0, j, D));
     }
-    if (q) {
-      insertBefore(Y, q);
-      push(F, removeElements.bind(0, q));
+    if (F) {
+      insertBefore(j, F);
+      push(G, removeElements.bind(0, F));
     }
-    if (H) {
-      const t = attr(Y, Ct);
-      attr(Y, Ct, "-1");
-      Y.focus();
+    if (M) {
+      const t = attr(j, Ct);
+      attr(j, Ct, "-1");
+      j.focus();
       const n = on(y, "pointerdown keydown", (() => {
-        t ? attr(Y, Ct, t) : removeAttr(Y, Ct);
+        t ? attr(j, Ct, t) : removeAttr(j, Ct);
         n();
       }));
+    } else if (H && H.focus) {
+      H.focus();
     }
-    N = 0;
+    X = 0;
   };
-  return [ M, appendElements, runEachAndClear.bind(0, F) ];
+  return [ R, appendElements, runEachAndClear.bind(0, G) ];
 };
 
 const createTrinsicUpdateSegment = (t, n) => {
@@ -2352,7 +2355,7 @@ const createDragScrollingEvents = (t, n, o, s, e, c) => {
 
 const createScrollbarsSetupEvents = (t, n) => (o, s, e, c, r, l) => {
   const {Gt: i} = o;
-  const [a, u] = selfCancelTimeout(500);
+  const [a, u] = selfCancelTimeout(333);
   const d = !!r.scrollBy;
   let f = true;
   return runEachAndClear.bind(0, [ on(i, "pointerenter", (() => {

packages/overlayscrollbars/src/setups/scrollbarsSetup/scrollbarsSetup.events.ts

@@ -136,7 +136,7 @@ export const createScrollbarsSetupEvents =
     isHorizontal
   ) => {
     const { _scrollbar } = scrollbarStructure;
-    const [wheelTimeout, clearScrollTimeout] = selfCancelTimeout(500);
+    const [wheelTimeout, clearScrollTimeout] = selfCancelTimeout(333);
     const scrollByFn = !!scrollOffsetElm.scrollBy;
     let wheelScrollBy = true;
 
@@ -153,6 +153,7 @@ export const createScrollbarsSetupEvents =
         (wheelEvent: WheelEvent) => {
           const { deltaX, deltaY, deltaMode } = wheelEvent;
 
+          // the first wheel event is swallowed, simulate scroll to compensate for it
           if (scrollByFn && wheelScrollBy && deltaMode === 0 && parent(_scrollbar) === hostElm) {
             scrollOffsetElm.scrollBy({
               left: deltaX,

packages/overlayscrollbars/src/setups/structureSetup/structureSetup.elements.ts

@@ -129,8 +129,8 @@ export const createStructureSetupElements = (
   );
   const viewportIsTarget = viewportElement === targetElement;
   const viewportIsTargetBody = viewportIsTarget && isBody;
-  const setFocus =
-    !viewportIsTarget && wnd.top === wnd && ownerDocument.activeElement === targetElement;
+  const activeElm = ownerDocument.activeElement;
+  const setViewportFocus = !viewportIsTarget && wnd.top === wnd && activeElm === targetElement;
   const evaluatedTargetObj: StructureSetupElementsObj = {
     _target: targetElement,
     _host: isTextarea
@@ -241,7 +241,7 @@ export const createStructureSetupElements = (
       insertBefore(_viewport, _viewportArrange);
       push(destroyFns, removeElements.bind(0, _viewportArrange));
     }
-    if (setFocus) {
+    if (setViewportFocus) {
       const ogTabindex = attr(_viewport, tabIndexStr);
 
       attr(_viewport, tabIndexStr, '-1');
@@ -251,6 +251,8 @@ export const createStructureSetupElements = (
         ogTabindex ? attr(_viewport, tabIndexStr, ogTabindex) : removeAttr(_viewport, tabIndexStr);
         off();
       });
+    } else if (activeElm && (activeElm as HTMLElement).focus) {
+      (activeElm as HTMLElement).focus();
     }
 
     // @ts-ignore