fix(grouping): add hook to depend on ref to avoid having stale handler

GitOrigin-RevId: 377b988f4031e7f8a6409b14db39a641367d45ff
plasmicapp · Jan 9, 2025 · d9a47cb · d9a47cb
1 parent c574ca8
commit d9a47cb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/ProjectPanel/NavigationDropdown.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/ProjectPanel/NavigationDropdown.tsx
@@ -320,6 +320,12 @@ function NavigationDropdown_(
     [setDebouncedQuery]
   );
   const treeRef = useRef<VirtualTreeRef>(null);
+  const expandAll = React.useCallback(() => {
+    treeRef.current?.expandAll();
+  }, [treeRef.current]);
+  const collapseAll = React.useCallback(() => {
+    treeRef.current?.collapseAll();
+  }, [treeRef.current]);
 
   const getRowKey = React.useCallback((row: ArenaPanelRow) => {
     return row.key;
@@ -730,11 +736,11 @@ function NavigationDropdown_(
             },
           }}
           expandButton={{
-            onClick: treeRef.current?.expandAll,
+            onClick: expandAll,
             "data-test-id": "nav-dropdown-expand-all",
           }}
           collapseButton={{
-            onClick: treeRef.current?.collapseAll,
+            onClick: collapseAll,
           }}
         >
           <NavigationDropdownContext.Provider value={contextValue}>

diff --git a/platform/wab/src/wab/client/components/sidebar/LeftGeneralTokensPanel.tsx b/platform/wab/src/wab/client/components/sidebar/LeftGeneralTokensPanel.tsx
@@ -108,6 +108,12 @@ const LeftGeneralTokensPanel = observer(function LeftGeneralTokensPanel() {
   const matcher = new Matcher(debouncedQuery);
 
   const treeRef = React.useRef<VirtualTreeRef>(null);
+  const expandAll = React.useCallback(() => {
+    treeRef.current?.expandAll();
+  }, [treeRef.current]);
+  const collapseAll = React.useCallback(() => {
+    treeRef.current?.collapseAll();
+  }, [treeRef.current]);
 
   const [justAdded, setJustAdded] = React.useState<StyleToken | undefined>(
     undefined
@@ -386,10 +392,10 @@ const LeftGeneralTokensPanel = observer(function LeftGeneralTokensPanel() {
             autoFocus: true,
           },
           expandProps: {
-            onClick: treeRef.current?.expandAll,
+            onClick: expandAll,
           },
           collapseProps: {
-            onClick: treeRef.current?.collapseAll,
+            onClick: collapseAll,
           },
         }}
         isTargeting={isTargeting}