fix:Ripple and Tabview bugs in Next.js App Router (#5674)

* fix:Ripple and Tabview bugs in next.js >= 13 * #5675 Theme update for OrderList * fix: Remove unnecessary code * Update comment * fix: break Ripple when use Page Router --------- Co-authored-by: Yiğit FINDIKLI <[email protected]>
primefaces · Jan 3, 2024 · c7fe6c9 · c7fe6c9
1 parent a82e965
commit c7fe6c9
Show file tree

Hide file tree

Showing 58 changed files with 39,912 additions and 28,301 deletions.
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
@@ -6,6 +6,7 @@ import { RippleBase } from './RippleBase';
 
 export const Ripple = React.memo(
     React.forwardRef((inProps, ref) => {
+        const [isMounted, setMounted] = React.useState(false);
         const inkRef = React.useRef(null);
         const targetRef = React.useRef(null);
         const context = React.useContext(PrimeReactContext);
@@ -78,12 +79,17 @@ export const Ripple = React.memo(
         }));
 
         useMountEffect(() => {
-            if (inkRef.current) {
+            // for App Router in Next.js ^14
+            setMounted(true);
+        });
+
+        useUpdateEffect(() => {
+            if (isMounted && inkRef.current) {
                 targetRef.current = getTarget();
                 setDimensions();
                 bindEvents();
             }
-        });
+        }, [isMounted]);
 
         useUpdateEffect(() => {
             if (inkRef.current && !targetRef.current) {

diff --git a/components/lib/utils/ObjectUtils.js b/components/lib/utils/ObjectUtils.js
@@ -222,7 +222,13 @@ export default class ObjectUtils {
     static isValidChild(child, type, validTypes) {
         /* eslint-disable */
         if (child) {
-            const childType = this.getComponentProp(child, '__TYPE') || (child.type ? child.type.displayName : undefined);
+            let childType = this.getComponentProp(child, '__TYPE') || (child.type ? child.type.displayName : undefined);
+
+            // for App Router in Next.js ^14,
+            if (!childType && child?.type?._payload?.value) {
+                childType = child.type._payload.value.find((v) => v === type);
+            }
+
             const isValid = childType === type;
 
             try {