fix: update Popup's ref when Masking re-renderers

arco-design · Dec 2, 2024 · 458d6c8 · 458d6c8
1 parent 4a5c0f8
commit 458d6c8
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/packages/arcodesign/components/popup/index.tsx b/packages/arcodesign/components/popup/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, forwardRef, Ref, useImperativeHandle } from 'react';
+import React, { useRef, forwardRef, Ref, useImperativeHandle, useState } from 'react';
 import { cls, componentWrapper } from '@arco-design/mobile-utils';
 import { ContextLayout, CompWithGlobalContext } from '../context-provider';
 import Masking, { MaskingCommonProps, MaskingRef, OpenBaseProps } from '../masking';
@@ -62,11 +62,14 @@ const Popup = forwardRef((props: PopupProps, ref: Ref<PopupRef>) => {
         translateZ = false,
         maskTransitionTimeout = { enter: 450, exit: 240 },
         contentTransitionTimeout = { enter: 450, exit: 240 },
+        onOpen,
+        onClose,
         ...restProps
     } = props;
     const maskingRef = useRef<MaskingRef>(null);
+    const [trueVisible, setTrueVisible] = useState(props.visible);
 
-    useImperativeHandle(ref, () => maskingRef.current!);
+    useImperativeHandle(ref, () => maskingRef.current!, [props, trueVisible]);
 
     function renderPopup({ prefixCls }) {
         const prefix = `${prefixCls}-popup`;
@@ -87,6 +90,14 @@ const Popup = forwardRef((props: PopupProps, ref: Ref<PopupRef>) => {
                 )}
                 maskTransitionTimeout={maskTransitionTimeout}
                 contentTransitionTimeout={contentTransitionTimeout}
+                onOpen={() => {
+                    setTrueVisible(true);
+                    onOpen?.();
+                }}
+                onClose={() => {
+                    setTrueVisible(false);
+                    onClose?.();
+                }}
                 {...restProps}
             >
                 {children}