feat(core): make focusableElements configurable

fixes #4677

Author: nolimits4web

src/angular/src/swiper.component.ts

@@ -60,6 +60,7 @@ export class SwiperComponent implements OnInit {
   @Input() updateOnWindowResize: SwiperOptions['updateOnWindowResize'];
   @Input() resizeObserver: SwiperOptions['resizeObserver'];
   @Input() nested: SwiperOptions['nested'];
+  @Input() focusableElements: SwiperOptions['focusableElements'];
   @Input() width: SwiperOptions['width'];
   @Input() height: SwiperOptions['height'];
   @Input() preventInteractionOnTransition: SwiperOptions['preventInteractionOnTransition'];

src/angular/src/utils/params-list.ts

@@ -9,6 +9,7 @@ export const paramsList = [
   'updateOnWindowResize',
   'resizeObserver',
   'nested',
+  'focusableElements',
   '_width',
   '_height',
   'preventInteractionOnTransition',

src/components/core/core-class.js

@@ -207,7 +207,7 @@ class Swiper {
         startTranslate: undefined,
         allowThresholdMove: undefined,
         // Form elements to match
-        formElements: 'input, select, option, textarea, button, video, label',
+        focusableElements: swiper.params.focusableElements,
         // Last click time
         lastClickTime: now(),
         clickTimeout: undefined,

src/components/core/defaults.js

@@ -10,6 +10,7 @@ export default {
   nested: false,
   createElements: false,
   enabled: true,
+  focusableElements: 'input, select, option, textarea, button, video, label',
 
   // Overrides
   width: null,

src/components/core/events/onTouchMove.js

@@ -59,7 +59,7 @@ export default function onTouchMove(event) {
     }
   }
   if (data.isTouchEvent && document.activeElement) {
-    if (e.target === document.activeElement && $(e.target).is(data.formElements)) {
+    if (e.target === document.activeElement && $(e.target).is(data.focusableElements)) {
       data.isMoved = true;
       swiper.allowClick = false;
       return;

src/components/core/events/onTouchStart.js

@@ -83,10 +83,10 @@ export default function onTouchStart(event) {
   if (params.threshold > 0) data.allowThresholdMove = false;
   if (e.type !== 'touchstart') {
     let preventDefault = true;
-    if ($targetEl.is(data.formElements)) preventDefault = false;
+    if ($targetEl.is(data.focusableElements)) preventDefault = false;
     if (
       document.activeElement &&
-      $(document.activeElement).is(data.formElements) &&
+      $(document.activeElement).is(data.focusableElements) &&
       document.activeElement !== $targetEl[0]
     ) {
       document.activeElement.blur();

src/react/params-list.js

@@ -9,6 +9,7 @@ const paramsList = [
   'updateOnWindowResize',
   'resizeObserver',
   'nested',
+  'focusableElements',
   '_enabled',
   '_width',
   '_height',

src/svelte/params-list.js

@@ -9,6 +9,7 @@ const paramsList = [
   'updateOnWindowResize',
   'resizeObserver',
   'nested',
+  'focusableElements',
   '_enabled',
   '_width',
   '_height',

src/types/swiper-options.d.ts

@@ -139,6 +139,13 @@ export interface SwiperOptions {
    */
   createElements?: boolean;
 
+  /**
+   * CSS selector for focusable elements. Swiping will be disabled on such elements if they are "focused"
+   *
+   * @default 'input, select, option, textarea, button, video, label'
+   */
+  focusableElements?: string;
+
   /**
    * If enabled (by default) and navigation elements' parameters passed as a string (like `".pagination"`)
    * then Swiper will look for such elements through child elements first.

src/vue/params-list.js

@@ -9,6 +9,7 @@ const paramsList = [
   'updateOnWindowResize',
   'resizeObserver',
   'nested',
+  'focusableElements',
   '_enabled',
   '_width',
   '_height',

src/vue/swiper.js

@@ -29,6 +29,7 @@ const Swiper = {
     updateOnWindowResize: { type: Boolean, default: undefined },
     resizeObserver: { type: Boolean, default: undefined },
     nested: { type: Boolean, default: undefined },
+    focusableElements: { type: Boolean, default: undefined },
     width: { type: Number, default: undefined },
     height: { type: Number, default: undefined },
     preventInteractionOnTransition: { type: Boolean, default: undefined },