From 0955502b7223a008708882b7cb8f4f4e21fa4c1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B7=AF=E6=8C=AF=E5=87=AF?= Date: Tue, 2 Dec 2025 17:22:26 +0800 Subject: [PATCH 1/5] fix: Resolve DOM residue issue on activate --- src/Dialog/index.tsx | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx index 456e7f14..5989e19f 100644 --- a/src/Dialog/index.tsx +++ b/src/Dialog/index.tsx @@ -58,6 +58,7 @@ const Dialog: React.FC = (props) => { const lastOutSideActiveElementRef = useRef(null); const wrapperRef = useRef(null); const contentRef = useRef(null); + const closeTimerRef = useRef>(null); const [animatedVisible, setAnimatedVisible] = React.useState(visible); @@ -157,22 +158,36 @@ const Dialog: React.FC = (props) => { // ========================= Effect ========================= useEffect(() => { + clearTimeout(closeTimerRef.current); + if (visible) { setAnimatedVisible(true); saveLastOutSideActiveElementRef(); - } else if ( - animatedVisible && - contentRef.current.enableMotion() && - !contentRef.current.inMotion() - ) { - doClose(); + } else if (animatedVisible) { + const hasMotion = contentRef.current?.enableMotion?.(); + const inMotion = contentRef.current?.inMotion?.(); + + if (hasMotion && !inMotion) { + doClose(); + } else { + closeTimerRef.current = setTimeout(() => { + if (!visible && animatedVisible) { + doClose(); + } + }, 500); + } } + + return () => { + clearTimeout(closeTimerRef.current); + }; }, [visible]); // Remove direct should also check the scroll bar update useEffect( () => () => { clearTimeout(contentTimeoutRef.current); + clearTimeout(closeTimerRef.current); }, [], ); From e169a3c11f6d94793a420ff5fa465b80cbf7579f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B7=AF=E6=8C=AF=E5=87=AF?= Date: Wed, 3 Dec 2025 11:48:47 +0800 Subject: [PATCH 2/5] test: set CSSMotion key --- src/Dialog/Content/index.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/Dialog/Content/index.tsx b/src/Dialog/Content/index.tsx index 665de5bf..e0cfbba2 100644 --- a/src/Dialog/Content/index.tsx +++ b/src/Dialog/Content/index.tsx @@ -33,9 +33,20 @@ const Content = React.forwardRef((props, ref) => { } = props; const dialogRef = useRef<{ nativeElement: HTMLElement } & CSSMotionStateRef>(null); - const panelRef = useRef(null); + // Force remount CSSMotion when visible changes from false to false + // This handles React.Activity scenarios where component state is preserved + const [motionKey, setMotionKey] = React.useState(0); + const prevVisibleRef = useRef(visible); + + React.useEffect(() => { + if (!visible && !prevVisibleRef.current) { + setMotionKey(k => k + 1); + } + prevVisibleRef.current = visible; + }, [visible]); + // ============================== Refs ============================== React.useImperativeHandle(ref, () => ({ ...panelRef.current, @@ -64,6 +75,7 @@ const Content = React.forwardRef((props, ref) => { // ============================= Render ============================= return ( Date: Wed, 3 Dec 2025 17:03:07 +0800 Subject: [PATCH 3/5] test: revert closeTimerRef --- src/Dialog/index.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx index 5989e19f..c310172f 100644 --- a/src/Dialog/index.tsx +++ b/src/Dialog/index.tsx @@ -169,12 +169,6 @@ const Dialog: React.FC = (props) => { if (hasMotion && !inMotion) { doClose(); - } else { - closeTimerRef.current = setTimeout(() => { - if (!visible && animatedVisible) { - doClose(); - } - }, 500); } } From 221caf46e0718a2e27ab84d270124cad91f65169 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B7=AF=E6=8C=AF=E5=87=AF?= Date: Wed, 3 Dec 2025 17:06:39 +0800 Subject: [PATCH 4/5] Revert "test: revert closeTimerRef" This reverts commit db0d5ebe9ae68576c05bb50462cd58d38aef3531. --- src/Dialog/index.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx index c310172f..5989e19f 100644 --- a/src/Dialog/index.tsx +++ b/src/Dialog/index.tsx @@ -169,6 +169,12 @@ const Dialog: React.FC = (props) => { if (hasMotion && !inMotion) { doClose(); + } else { + closeTimerRef.current = setTimeout(() => { + if (!visible && animatedVisible) { + doClose(); + } + }, 500); } } From ad8512c81d371e1ebffb34c91257ca1ec4ca74b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B7=AF=E6=8C=AF=E5=87=AF?= Date: Wed, 3 Dec 2025 17:07:19 +0800 Subject: [PATCH 5/5] Revert "fix: Resolve DOM residue issue on activate" This reverts commit 0955502b7223a008708882b7cb8f4f4e21fa4c1c. --- src/Dialog/index.tsx | 27 ++++++--------------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/src/Dialog/index.tsx b/src/Dialog/index.tsx index 5989e19f..456e7f14 100644 --- a/src/Dialog/index.tsx +++ b/src/Dialog/index.tsx @@ -58,7 +58,6 @@ const Dialog: React.FC = (props) => { const lastOutSideActiveElementRef = useRef(null); const wrapperRef = useRef(null); const contentRef = useRef(null); - const closeTimerRef = useRef>(null); const [animatedVisible, setAnimatedVisible] = React.useState(visible); @@ -158,36 +157,22 @@ const Dialog: React.FC = (props) => { // ========================= Effect ========================= useEffect(() => { - clearTimeout(closeTimerRef.current); - if (visible) { setAnimatedVisible(true); saveLastOutSideActiveElementRef(); - } else if (animatedVisible) { - const hasMotion = contentRef.current?.enableMotion?.(); - const inMotion = contentRef.current?.inMotion?.(); - - if (hasMotion && !inMotion) { - doClose(); - } else { - closeTimerRef.current = setTimeout(() => { - if (!visible && animatedVisible) { - doClose(); - } - }, 500); - } + } else if ( + animatedVisible && + contentRef.current.enableMotion() && + !contentRef.current.inMotion() + ) { + doClose(); } - - return () => { - clearTimeout(closeTimerRef.current); - }; }, [visible]); // Remove direct should also check the scroll bar update useEffect( () => () => { clearTimeout(contentTimeoutRef.current); - clearTimeout(closeTimerRef.current); }, [], );