Fixed #4160 - Ripple: first click on component has incorrect location

primefaces · Mar 28, 2023 · 3e23251 · 3e23251
1 parent 16852fa
commit 3e23251
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
@@ -54,12 +54,7 @@ export const Ripple = React.memo(
 
             DomHandler.removeClass(inkRef.current, 'p-ink-active');
 
-            if (!DomHandler.getHeight(inkRef.current) && !DomHandler.getWidth(inkRef.current)) {
-                let d = Math.max(DomHandler.getOuterWidth(targetRef.current), DomHandler.getOuterHeight(targetRef.current));
-
-                inkRef.current.style.height = d + 'px';
-                inkRef.current.style.width = d + 'px';
-            }
+            setDimensions();
 
             inkRef.current.style.top = offsetY + 'px';
             inkRef.current.style.left = offsetX + 'px';
@@ -70,16 +65,27 @@ export const Ripple = React.memo(
             DomHandler.removeClass(event.currentTarget, 'p-ink-active');
         };
 
+        const setDimensions = () => {
+            if (inkRef.current && !DomHandler.getHeight(inkRef.current) && !DomHandler.getWidth(inkRef.current)) {
+                let d = Math.max(DomHandler.getOuterWidth(targetRef.current), DomHandler.getOuterHeight(targetRef.current));
+
+                inkRef.current.style.height = d + 'px';
+                inkRef.current.style.width = d + 'px';
+            }
+        };
+
         useMountEffect(() => {
             if (inkRef.current) {
                 targetRef.current = getTarget();
+                setDimensions();
                 bindEvents();
             }
         });
 
         useUpdateEffect(() => {
             if (inkRef.current && !targetRef.current) {
                 targetRef.current = getTarget();
+                setDimensions();
                 bindEvents();
             }
         });