From 7bd5509f8a45627ebb15f5de9c2930a7bb95ea30 Mon Sep 17 00:00:00 2001
From: melloware <mellowaredev@gmail.com>
Date: Sun, 23 Oct 2022 09:29:03 -0400
Subject: [PATCH] Fix #3497: Ripple fix for touchable devices

---
 components/lib/ripple/Ripple.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
index 9e29ab02ea..0a5f9dfaca 100644
--- 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;