fix: cancel pending rAF in setFocusTarget on cleanup and re-invocation

majiayu000 · majiayu000 · commit 1d42fbc915a7 · 2026-03-21T15:28:31.000+08:00
Address CodeRabbit review feedback on PR #3100: track the requestAnimationFrame ID via a ref and cancel it before scheduling a new one or when the component unmounts. Signed-off-by: majiayu000 <1835304752@qq.com>
diff --git a/frontend/app/block/block.tsx b/frontend/app/block/block.tsx
@@ -144,6 +144,7 @@ const BlockFull = memo(({ nodeModel, viewModel }: FullBlockProps) => {
     const focusElemRef = useRef<HTMLInputElement>(null);
     const blockRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
+    const pendingFocusRafRef = useRef<number | null>(null);
     const [blockClicked, setBlockClicked] = useState(false);
     const blockView = useAtomValue(waveEnv.getBlockMetaKeyAtom(nodeModel.blockId, "view")) ?? "";
     const isFocused = useAtomValue(nodeModel.isFocused);
@@ -156,6 +157,14 @@ const BlockFull = memo(({ nodeModel, viewModel }: FullBlockProps) => {
     const innerRect = useDebouncedNodeInnerRect(nodeModel);
     const noPadding = useAtomValueSafe(viewModel.noPadding);
 
+    useEffect(() => {
+        return () => {
+            if (pendingFocusRafRef.current != null) {
+                cancelAnimationFrame(pendingFocusRafRef.current);
+            }
+        };
+    }, []);
+
     useLayoutEffect(() => {
         setBlockClicked(isFocused);
     }, [isFocused]);
@@ -221,12 +230,17 @@ const BlockFull = memo(({ nodeModel, viewModel }: FullBlockProps) => {
     );
 
     const setFocusTarget = useCallback(() => {
+        if (pendingFocusRafRef.current != null) {
+            cancelAnimationFrame(pendingFocusRafRef.current);
+            pendingFocusRafRef.current = null;
+        }
         const ok = viewModel?.giveFocus?.();
         if (ok) {
             return;
         }
         focusElemRef.current?.focus({ preventScroll: true });
-        requestAnimationFrame(() => {
+        pendingFocusRafRef.current = requestAnimationFrame(() => {
+            pendingFocusRafRef.current = null;
             viewModel?.giveFocus?.();
         });
     }, [viewModel]);
