Bug Fix: Prevent scrolling when the active slide gets focus.

dist/js/splide-renderer.min.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.1.6
+ * Version  : 3.1.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */

dist/js/splide.cjs.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.1.6
+ * Version  : 3.1.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -200,6 +200,10 @@ function display(elm, display2) {
   style(elm, "display", display2);
 }
 
+function focus(elm) {
+  elm["setActive"] && elm["setActive"]() || elm.focus({ preventScroll: true });
+}
+
 function getAttribute(elm, attr) {
   return elm.getAttribute(attr);
 }
@@ -1854,12 +1858,12 @@ function Drag(Splide2, Components2, options) {
   function coordOf(e, orthogonal) {
     return (isTouchEvent(e) ? e.touches[0] : e)[`page${resolve(orthogonal ? "Y" : "X")}`];
   }
-  function isTouchEvent(e) {
-    return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
-  }
   function timeOf(e) {
     return e.timeStamp;
   }
+  function isTouchEvent(e) {
+    return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
+  }
   function constrain(diff) {
     return diff / (hasExceeded && Splide2.is(SLIDE) ? FRICTION : 1);
   }
@@ -2056,7 +2060,7 @@ function Pagination(Splide2, Components2, options) {
   function onClick(page) {
     Controller.go(`>${page}`, true, () => {
       const Slide = Slides.getAt(Controller.toIndex(page));
-      Slide && Slide.slide.focus();
+      Slide && focus(Slide.slide);
     });
   }
   function getAt(index) {

dist/js/splide.esm.js

@@ -1,6 +1,6 @@
 /*!
  * Splide.js
- * Version  : 3.1.6
+ * Version  : 3.1.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -196,6 +196,10 @@ function display(elm, display2) {
   style(elm, "display", display2);
 }
 
+function focus(elm) {
+  elm["setActive"] && elm["setActive"]() || elm.focus({ preventScroll: true });
+}
+
 function getAttribute(elm, attr) {
   return elm.getAttribute(attr);
 }
@@ -1850,12 +1854,12 @@ function Drag(Splide2, Components2, options) {
   function coordOf(e, orthogonal) {
     return (isTouchEvent(e) ? e.touches[0] : e)[`page${resolve(orthogonal ? "Y" : "X")}`];
   }
-  function isTouchEvent(e) {
-    return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
-  }
   function timeOf(e) {
     return e.timeStamp;
   }
+  function isTouchEvent(e) {
+    return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
+  }
   function constrain(diff) {
     return diff / (hasExceeded && Splide2.is(SLIDE) ? FRICTION : 1);
   }
@@ -2052,7 +2056,7 @@ function Pagination(Splide2, Components2, options) {
   function onClick(page) {
     Controller.go(`>${page}`, true, () => {
       const Slide = Slides.getAt(Controller.toIndex(page));
-      Slide && Slide.slide.focus();
+      Slide && focus(Slide.slide);
     });
   }
   function getAt(index) {

dist/js/splide.js

@@ -4,7 +4,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
 /*!
  * Splide.js
- * Version  : 3.1.6
+ * Version  : 3.1.7
  * License  : MIT
  * Copyright: 2021 Naotoshi Fujita
  */
@@ -219,6 +219,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     style(elm, "display", display2);
   }
 
+  function focus(elm) {
+    elm["setActive"] && elm["setActive"]() || elm.focus({
+      preventScroll: true
+    });
+  }
+
   function getAttribute(elm, attr) {
     return elm.getAttribute(attr);
   }
@@ -2237,14 +2243,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       return (isTouchEvent(e) ? e.touches[0] : e)["page" + resolve(orthogonal ? "Y" : "X")];
     }
 
-    function isTouchEvent(e) {
-      return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
-    }
-
     function timeOf(e) {
       return e.timeStamp;
     }
 
+    function isTouchEvent(e) {
+      return typeof TouchEvent !== "undefined" && e instanceof TouchEvent;
+    }
+
     function constrain(diff) {
       return diff / (hasExceeded && Splide2.is(SLIDE) ? FRICTION : 1);
     }
@@ -2514,7 +2520,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     function onClick(page) {
       Controller.go(">" + page, true, function () {
         var Slide = Slides.getAt(Controller.toIndex(page));
-        Slide && Slide.slide.focus();
+        Slide && focus(Slide.slide);
       });
     }
 

dist/types/components/Controller/Controller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACvF,MAAM,CAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACnH,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACnC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CAwU1G"}
+{"version":3,"file":"Controller.d.ts","sourceRoot":"","sources":["Controller.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAI9E;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,EAAE,CAAE,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACvF,MAAM,CAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,WAAW,GAAI,IAAI,CAAC;IACnH,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,OAAO,CAAE,WAAW,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzC,MAAM,IAAI,MAAM,CAAC;IACjB,QAAQ,CAAE,KAAK,EAAE,MAAM,GAAI,IAAI,CAAC;IAChC,QAAQ,CAAE,IAAI,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACnC,OAAO,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,KAAK,EAAE,MAAM,GAAI,MAAM,CAAC;IAChC,MAAM,CAAE,QAAQ,EAAE,MAAM,GAAI,MAAM,CAAC;IACnC,QAAQ,IAAI,OAAO,CAAC;CACrB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CA0U1G"}

dist/types/components/Layout/Layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["Layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,QAAQ,IAAI,MAAM,CAAC;IACnB,SAAS,CAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzD,UAAU,IAAI,MAAM,CAAC;IACrB,SAAS,CAAE,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC1D,UAAU,CAAE,KAAK,EAAE,OAAO,GAAI,MAAM,CAAC;CACtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CAiNlG"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["Layout.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,QAAQ,IAAI,MAAM,CAAC;IACnB,SAAS,CAAE,KAAK,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IACzD,UAAU,IAAI,MAAM,CAAC;IACrB,SAAS,CAAE,KAAK,CAAC,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,GAAI,MAAM,CAAC;IAC1D,UAAU,CAAE,KAAK,EAAE,OAAO,GAAI,MAAM,CAAC;CACtC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,eAAe,CAgNlG"}

dist/types/components/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["Pagination.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAIjE;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,CAAE,KAAK,EAAE,MAAM,GAAI,cAAc,CAAC;CACxC;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,aAAa,CAAC;IAClB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CA+H1G"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["Pagination.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAejE;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,aAAa;IACxD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,KAAK,CAAE,KAAK,EAAE,MAAM,GAAI,cAAc,CAAC;CACxC;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,EAAE,EAAE,aAAa,CAAC;IAClB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,GAAI,mBAAmB,CA+H1G"}

dist/types/utils/dom/index.d.ts

@@ -5,6 +5,7 @@ export { child } from './child/child';
 export { children } from './children/children';
 export { create } from './create/create';
 export { display } from './display/display';
+export { focus } from './focus/focus';
 export { getAttribute } from './getAttribute/getAttribute';
 export { hasClass } from './hasClass/hasClass';
 export { matches } from './matches/matches';

dist/types/utils/dom/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAS,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAY,uBAAuB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAiB,aAAa,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAU,2BAA2B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAS,6BAA6B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAU,2BAA2B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAiB,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAS,6BAA6B,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAY,uBAAuB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAc,mBAAmB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAa,qBAAqB,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAiB,aAAa,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAe,iBAAiB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAU,2BAA2B,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAS,6BAA6B,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAgB,eAAe,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAU,2BAA2B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAiB,aAAa,CAAC"}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.1.0",
+  "version": "3.1.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splidejs/splide",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "description": "Splide is a lightweight, flexible and accessible slider/carousel. No dependencies, no Lighthouse errors.",
   "author": "Naotoshi Fujita",
   "license": "MIT",

src/js/components/Pagination/Pagination.ts

@@ -11,7 +11,18 @@ import {
 import { EventInterface } from '../../constructors';
 import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
-import { addClass, ceil, create, empty, format, remove, removeAttribute, removeClass, setAttribute } from '../../utils';
+import {
+  addClass,
+  ceil,
+  create,
+  empty,
+  focus,
+  format,
+  remove,
+  removeAttribute,
+  removeClass,
+  setAttribute,
+} from '../../utils';
 
 
 /**
@@ -142,7 +153,7 @@ export function Pagination( Splide: Splide, Components: Components, options: Opt
   function onClick( page: number ): void {
     Controller.go( `>${ page }`, true, () => {
       const Slide = Slides.getAt( Controller.toIndex( page ) );
-      Slide && Slide.slide.focus();
+      Slide && focus( Slide.slide );
     } );
   }
 

src/js/utils/dom/focus/focus.test.ts

@@ -0,0 +1,17 @@
+import { focus } from './focus';
+
+
+describe( 'focus', () => {
+  test( 'can make an element focused if it is focusable.', () => {
+    const div = document.createElement( 'div' );
+
+    div.tabIndex = 0;
+    document.body.appendChild( div );
+
+    expect( document.activeElement ).not.toBe( div );
+
+    focus( div );
+
+    expect( document.activeElement ).toBe( div );
+  } );
+} );

src/js/utils/dom/focus/focus.ts

@@ -0,0 +1,8 @@
+/**
+ * Focuses the provided element without scrolling the ascendant element.
+ *
+ * @param elm - An element to focus.
+ */
+export function focus( elm: HTMLElement ): void {
+  elm[ 'setActive' ] && elm[ 'setActive' ]() || elm.focus( { preventScroll: true } )
+}

src/js/utils/dom/index.ts

@@ -5,6 +5,7 @@ export { child }           from './child/child';
 export { children }        from './children/children';
 export { create }          from './create/create';
 export { display }         from './display/display';
+export { focus }           from './focus/focus';
 export { getAttribute }    from './getAttribute/getAttribute';
 export { hasClass }        from './hasClass/hasClass';
 export { matches }         from './matches/matches';