Fix #3256: Ripple fixes for TouchStart (#3530)

primefaces · Oct 31, 2022 · 8587d5b · 8587d5b
1 parent 8937497
commit 8587d5b
Showing 1 changed file with 21 additions and 8 deletions.
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
@@ -27,11 +27,28 @@ export const Ripple = React.memo(
         };
 
         const onTouchStart = (event) => {
-            onMouseDown(event);
-            event.preventDefault();
+            isTouching.current = true;
+            const offset = DomHandler.getOffset(targetRef.current);
+            const offsetX = event.targetTouches[0].pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(inkRef.current) / 2;
+            const offsetY = event.targetTouches[0].pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(inkRef.current) / 2;
+
+            activateRipple(offsetX, offsetY);
         };
 
         const onMouseDown = (event) => {
+            if (DomHandler.isTouchDevice()) {
+                // already started ripple with onTouchStart
+                return;
+            }
+
+            const offset = DomHandler.getOffset(targetRef.current);
+            const offsetX = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(inkRef.current) / 2;
+            const offsetY = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(inkRef.current) / 2;
+
+            activateRipple(offsetX, offsetY);
+        };
+
+        const activateRipple = (offsetX, offsetY) => {
             if (!inkRef.current || getComputedStyle(inkRef.current, null).display === 'none') {
                 return;
             }
@@ -45,12 +62,8 @@ export const Ripple = React.memo(
                 inkRef.current.style.width = d + 'px';
             }
 
-            const offset = DomHandler.getOffset(targetRef.current);
-            const x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(inkRef.current) / 2;
-            const y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(inkRef.current) / 2;
-
-            inkRef.current.style.top = y + 'px';
-            inkRef.current.style.left = x + 'px';
+            inkRef.current.style.top = offsetY + 'px';
+            inkRef.current.style.left = offsetX + 'px';
             DomHandler.addClass(inkRef.current, 'p-ink-active');
         };