From cc5341f28c800c2b33ff033e2e845d4fb50d4243 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mert=20Tu=CC=88rel?= Date: Sun, 24 Jan 2021 18:39:39 +0300 Subject: [PATCH 1/4] Removed preventDefault statements from handlers of passive events: onTouchMove, onTouchStart --- src/utils/innerSliderUtils.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 9c8465276..31e95c963 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -316,7 +316,7 @@ export const keyHandler = (e, accessibility, rtl) => { }; export const swipeStart = (e, swipe, draggable) => { - e.target.tagName === "IMG" && e.preventDefault(); + e.target.tagName === "IMG"; if (!swipe || (!draggable && e.type.indexOf("mouse") !== -1)) return ""; return { dragging: true, @@ -352,7 +352,6 @@ export const swipeMove = (e, spec) => { listWidth } = spec; if (scrolling) return; - if (animating) return e.preventDefault(); if (vertical && swipeToSlide && verticalSwiping) e.preventDefault(); let swipeLeft, state = {}; @@ -421,7 +420,6 @@ export const swipeMove = (e, spec) => { } if (touchObject.swipeLength > 10) { state["swiping"] = true; - e.preventDefault(); } return state; }; From 6e121d24484a9ff89a066f877d4c35f360b7e6c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mert=20Tu=CC=88rel?= Date: Sun, 24 Jan 2021 20:08:38 +0300 Subject: [PATCH 2/4] Revert "Removed preventDefault statements from handlers of passive events: onTouchMove, onTouchStart" This reverts commit cc5341f28c800c2b33ff033e2e845d4fb50d4243. --- src/utils/innerSliderUtils.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 31e95c963..9c8465276 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -316,7 +316,7 @@ export const keyHandler = (e, accessibility, rtl) => { }; export const swipeStart = (e, swipe, draggable) => { - e.target.tagName === "IMG"; + e.target.tagName === "IMG" && e.preventDefault(); if (!swipe || (!draggable && e.type.indexOf("mouse") !== -1)) return ""; return { dragging: true, @@ -352,6 +352,7 @@ export const swipeMove = (e, spec) => { listWidth } = spec; if (scrolling) return; + if (animating) return e.preventDefault(); if (vertical && swipeToSlide && verticalSwiping) e.preventDefault(); let swipeLeft, state = {}; @@ -420,6 +421,7 @@ export const swipeMove = (e, spec) => { } if (touchObject.swipeLength > 10) { state["swiping"] = true; + e.preventDefault(); } return state; }; From f373992c72c0f8946372d152a319f252fdc174e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mert=20Tu=CC=88rel?= Date: Sun, 24 Jan 2021 20:14:00 +0300 Subject: [PATCH 3/4] Noticed functional side effects after removing preventDefault methods in last commit. Implemented new method. --- src/utils/innerSliderUtils.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 9c8465276..7f7822cf4 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -4,6 +4,13 @@ export function clamp(number, lowerBound, upperBound) { return Math.max(lowerBound, Math.min(number, upperBound)); } +export const safePreventDefault = event => { + const passiveEvents = ["onTouchStart", "onTouchMove", "onTouchEnd"]; + if(!passiveEvents.includes(event._reactName)) { + event.preventDefault(); + } +} + export const getOnDemandLazySlides = spec => { let onDemandSlides = []; let startIndex = lazyStartIndex(spec); @@ -316,7 +323,7 @@ export const keyHandler = (e, accessibility, rtl) => { }; export const swipeStart = (e, swipe, draggable) => { - e.target.tagName === "IMG" && e.preventDefault(); + e.target.tagName === "IMG" && safePreventDefault(e); if (!swipe || (!draggable && e.type.indexOf("mouse") !== -1)) return ""; return { dragging: true, @@ -352,8 +359,8 @@ export const swipeMove = (e, spec) => { listWidth } = spec; if (scrolling) return; - if (animating) return e.preventDefault(); - if (vertical && swipeToSlide && verticalSwiping) e.preventDefault(); + if (animating) return safePreventDefault(e); + if (vertical && swipeToSlide && verticalSwiping) safePreventDefault(e); let swipeLeft, state = {}; let curLeft = getTrackLeft(spec); @@ -421,7 +428,7 @@ export const swipeMove = (e, spec) => { } if (touchObject.swipeLength > 10) { state["swiping"] = true; - e.preventDefault(); + safePreventDefault(e); } return state; }; @@ -442,7 +449,7 @@ export const swipeEnd = (e, spec) => { infinite } = spec; if (!dragging) { - if (swipe) e.preventDefault(); + if (swipe) safePreventDefault(e); return {}; } let minSwipe = verticalSwiping @@ -466,7 +473,7 @@ export const swipeEnd = (e, spec) => { return state; } if (touchObject.swipeLength > minSwipe) { - e.preventDefault(); + safePreventDefault(e); if (onSwipe) { onSwipe(swipeDirection); } From 89c36c7d14d2bf223346b0030831a196bc647c6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mert=20Tu=CC=88rel?= Date: Sun, 24 Jan 2021 21:53:54 +0300 Subject: [PATCH 4/4] Placed reactNames of events from event listeners those React consider they are passive. --- src/utils/innerSliderUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/innerSliderUtils.js b/src/utils/innerSliderUtils.js index 7f7822cf4..aa832f2cc 100644 --- a/src/utils/innerSliderUtils.js +++ b/src/utils/innerSliderUtils.js @@ -5,7 +5,7 @@ export function clamp(number, lowerBound, upperBound) { } export const safePreventDefault = event => { - const passiveEvents = ["onTouchStart", "onTouchMove", "onTouchEnd"]; + const passiveEvents = ["onTouchStart", "onTouchMove", "onWheel"]; if(!passiveEvents.includes(event._reactName)) { event.preventDefault(); }