[@mantine/core] Slider: Fix "Unable to preventDefault inside passive …

…event listener invocation" error appearing in console for touch devices (#1751)
mantinedev · Aug 12, 2022 · 5372d2e · 5372d2e
1 parent c43d2d2
commit 5372d2e
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 15 deletions.
diff --git a/src/mantine-core/src/Slider/RangeSlider/RangeSlider.tsx b/src/mantine-core/src/Slider/RangeSlider/RangeSlider.tsx
@@ -233,21 +233,13 @@ export const RangeSlider = forwardRef<HTMLDivElement, RangeSliderProps>((props,
     event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
     index: number
   ) {
-    if (event.cancelable) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-
+    event.stopPropagation();
     thumbIndex.current = index;
   }
 
   const handleTrackMouseDownCapture = (
     event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
   ) => {
-    if (event.cancelable) {
-      event.preventDefault();
-    }
-
     container.current.focus();
     const rect = container.current.getBoundingClientRect();
     const changePosition = getClientPosition(event.nativeEvent);

diff --git a/src/mantine-core/src/Slider/Slider/Slider.tsx b/src/mantine-core/src/Slider/Slider/Slider.tsx
@@ -175,10 +175,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>((props, ref) => {
   const handleThumbMouseDown = (
     event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
   ) => {
-    if (event.cancelable) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
+    event.stopPropagation();
   };
 
   const handleTrackKeydownCapture = (event: React.KeyboardEvent<HTMLDivElement>) => {

diff --git a/src/mantine-core/src/Slider/SliderRoot/SliderRoot.styles.ts b/src/mantine-core/src/Slider/SliderRoot/SliderRoot.styles.ts
@@ -22,5 +22,6 @@ export default createStyles((theme, { size, disabled }: SliderRootStyles) => ({
     display: 'flex',
     alignItems: 'center',
     cursor: disabled ? 'not-allowed' : 'pointer',
+    touchAction: 'none',
   },
 }));
diff --git a/src/mantine-core/src/Slider/Thumb/Thumb.styles.ts b/src/mantine-core/src/Slider/Thumb/Thumb.styles.ts
@@ -20,6 +20,7 @@ export default createStyles((theme, { color, size, disabled, thumbSize }: ThumbS
     whiteSpace: 'nowrap',
     pointerEvents: 'none',
     userSelect: 'none',
+    touchAction: 'none',
   },
 
   thumb: {
@@ -53,6 +54,7 @@ export default createStyles((theme, { color, size, disabled, thumbSize }: ThumbS
     transitionTimingFunction: theme.transitionTimingFunction,
     zIndex: 3,
     userSelect: 'none',
+    touchAction: 'none',
   },
 
   dragging: {

diff --git a/src/mantine-hooks/src/use-move/use-move.ts b/src/mantine-hooks/src/use-move/use-move.ts
@@ -94,13 +94,19 @@ export function useMove<T extends HTMLElement = HTMLDivElement>(
     const onMouseMove = (event: MouseEvent) => onScrub({ x: event.clientX, y: event.clientY });
 
     const onTouchStart = (event: TouchEvent) => {
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+
       startScrubbing();
-      event?.preventDefault();
       onTouchMove(event);
     };
 
     const onTouchMove = (event: TouchEvent) => {
-      event?.preventDefault();
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+
       onScrub({ x: event.changedTouches[0].clientX, y: event.changedTouches[0].clientY });
     };