Browse Source

Fix node height growing on remount with onlyRenderVisibleElements

When a node with inline parameters scrolls off-screen, React Flow
unmounts it, resetting trackedSettingsHeightRef to 0. On remount the
expand effect would add the panel height to the node again, even though
it was already included. Skip the expand animation on initial mount and
just sync the tracked ref from the DOM instead.

https://claude.ai/code/session_01MvD1n4QeXutgwUpKJuDGHa
handoff-20260429-1057
Claude 4 months ago
parent
commit
fcdeb6ff6f
Failed to extract signature
  1. 12
      src/components/nodes/BaseNode.tsx

12
src/components/nodes/BaseNode.tsx

@ -80,9 +80,21 @@ export function BaseNode({
const trackedSettingsHeightRef = useRef(0);
const isAnimatingRef = useRef(false);
const animationTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
const isInitialMountRef = useRef(true);
// Adjust node height when settings expand or collapse
useLayoutEffect(() => {
// On initial mount with settings already expanded (e.g. remount after
// onlyRenderVisibleElements), the node height already includes the panel.
// Just sync the tracked ref without adding height again.
if (isInitialMountRef.current) {
isInitialMountRef.current = false;
if (settingsExpanded && settingsPanelRef.current) {
trackedSettingsHeightRef.current = settingsPanelRef.current.offsetHeight;
}
return;
}
// Cancel any pending animation timeout from a previous toggle (handles rapid toggling)
if (animationTimeoutRef.current) {
clearTimeout(animationTimeoutRef.current);

Loading…
Cancel
Save