From e21cb53607474f5c2addf56e98f901efbb3da1e1 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 15 Apr 2024 12:22:58 +0200
Subject: [PATCH] fix: Fix scroll into view for the navigator (#3173)

Closes https://github.com/webstudio-is/webstudio/issues/3169

## Description

Auto scroll navigation item doesn't work when item is hidden

## Steps for reproduction

1. create lots of items in navigator, each with a nested item, see
scrollbar
2. click the last item from canvas, the inner one, so its not visible in
navigator
3. see navigator didn't scroll item into viewport because it was not
open

Navigator needs to open the item it wants to scroll to before scrolling
## Code Review

- [ ] hi @istarkov , I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
---
 .../design-system/src/components/tree/tree-node.tsx  | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/tree/tree-node.tsx b/packages/design-system/src/components/tree/tree-node.tsx
index c613770016..94f2df8913 100644
--- a/packages/design-system/src/components/tree/tree-node.tsx
+++ b/packages/design-system/src/components/tree/tree-node.tsx
@@ -207,7 +207,7 @@ const ItemContainer = styled(Flex, {
 });
 
 const useScrollIntoView = (
-  element: HTMLElement | null,
+  elementRef: { current: HTMLElement | null },
   {
     isDragging,
     isDropTarget,
@@ -218,8 +218,6 @@ const useScrollIntoView = (
   isDraggingRef.current = isDragging;
   const isDropTargetRef = useRef(isDropTarget);
   isDropTargetRef.current = isDropTarget;
-  const elementRef = useRef(element);
-  elementRef.current = element;
 
   // Scroll the selected button into view when selected from canvas.
   useEffect(() => {
@@ -233,7 +231,11 @@ const useScrollIntoView = (
         block: "nearest",
       });
     }
-  }, [isSelected]);
+  }, [
+    isSelected,
+    //only for the linter
+    elementRef,
+  ]);
 };
 
 export type TreeItemRenderProps<Data extends { id: string }> = {
@@ -317,7 +319,7 @@ export const TreeItemBody = <Data extends { id: string }>({
     itemSelector
   );
 
-  useScrollIntoView(itemButtonRef.current, {
+  useScrollIntoView(itemButtonRef, {
     isSelected,
     isDragging,
     isDropTarget,