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

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/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';

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';