Fix #3497: Ripple fix for touchable devices (#3499)

primefaces · Oct 23, 2022 · b0fbb72 · b0fbb72
1 parent 9c31fd1
commit b0fbb72
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
@@ -7,6 +7,7 @@ export const Ripple = React.memo(
     React.forwardRef(() => {
         const inkRef = React.useRef(null);
         const targetRef = React.useRef(null);
+        const isTouchable = DomHandler.isTouchDevice();
 
         const getTarget = () => {
             return inkRef.current && inkRef.current.parentElement;
@@ -15,15 +16,22 @@ export const Ripple = React.memo(
         const bindEvents = () => {
             if (targetRef.current) {
                 targetRef.current.addEventListener('mousedown', onMouseDown);
+                isTouchable && targetRef.current.addEventListener('touchstart', onTouchStart);
             }
         };
 
         const unbindEvents = () => {
             if (targetRef.current) {
                 targetRef.current.removeEventListener('mousedown', onMouseDown);
+                isTouchable && targetRef.current.removeEventListener('touchstart', onTouchStart);
             }
         };
 
+        const onTouchStart = (event) => {
+            this.onMouseDown(event);
+            event.preventDefault();
+        };
+
         const onMouseDown = (event) => {
             if (!inkRef.current || getComputedStyle(inkRef.current, null).display === 'none') {
                 return;