From a0cbf05da8e96a0b7333aeab36f2ba817aec8947 Mon Sep 17 00:00:00 2001
From: EYHN <cneyhn@gmail.com>
Date: Mon, 29 Jul 2024 09:57:36 +0000
Subject: [PATCH] fix(core): sidebar renaming bug (#7632)

---
 .../src/modules/explorer/views/nodes/folder/index.tsx | 11 ++++++++++-
 .../explorer/views/sections/organize/index.tsx        | 11 ++++++++++-
 .../modules/explorer/views/sections/tags/index.tsx    | 11 ++++++++++-
 .../core/src/modules/explorer/views/tree/node.tsx     |  8 +++-----
 4 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx b/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx
index cba01b834c..ae2d1ad72e 100644
--- a/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/nodes/folder/index.tsx
@@ -679,6 +679,15 @@ export const ExplorerFolderNodeFolder = ({
     [handleDeleteChildren, t]
   );
 
+  const handleCollapsedChange = useCallback((collapsed: boolean) => {
+    if (collapsed) {
+      setNewFolderId(null); // reset new folder id to clear the renaming state
+      setCollapsed(true);
+    } else {
+      setCollapsed(false);
+    }
+  }, []);
+
   return (
     <ExplorerTreeNode
       icon={({ draggedOver, className, treeInstruction }) => (
@@ -694,7 +703,7 @@ export const ExplorerFolderNodeFolder = ({
       renameable
       reorderable={reorderable}
       collapsed={collapsed}
-      setCollapsed={setCollapsed}
+      setCollapsed={handleCollapsedChange}
       onRename={handleRename}
       operations={finalOperations}
       canDrop={handleCanDrop}
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx b/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx
index 43c0151fd0..91be86b4fd 100644
--- a/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/organize/index.tsx
@@ -95,12 +95,21 @@ export const ExplorerOrganize = ({
     DropTargetOptions<AffineDNDData>['canDrop']
   >(() => args => args.source.data.entity?.type === 'folder', []);
 
+  const handleCollapsedChange = useCallback((collapsed: boolean) => {
+    if (collapsed) {
+      setNewFolderId(null); // reset new folder id to clear the renaming state
+      setCollapsed(true);
+    } else {
+      setCollapsed(false);
+    }
+  }, []);
+
   return (
     <Collapsible.Root className={styles.container} open={!collapsed}>
       <CategoryDivider
         className={styles.draggedOverHighlight}
         label={t['com.affine.rootAppSidebar.organize']()}
-        setCollapsed={setCollapsed}
+        setCollapsed={handleCollapsedChange}
         collapsed={collapsed}
       >
         <IconButton
diff --git a/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx b/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
index fa6b1c6da1..44f4882713 100644
--- a/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/sections/tags/index.tsx
@@ -37,12 +37,21 @@ export const ExplorerTags = ({
     setCollapsed(false);
   }, [t, tagService]);
 
+  const handleCollapsedChange = useCallback((collapsed: boolean) => {
+    if (collapsed) {
+      setCreatedTag(null); // reset created tag to clear the renaming state
+      setCollapsed(true);
+    } else {
+      setCollapsed(false);
+    }
+  }, []);
+
   return (
     <Collapsible.Root className={styles.container} open={!collapsed}>
       <CategoryDivider
         className={styles.draggedOverHighlight}
         label={t['com.affine.rootAppSidebar.tags']()}
-        setCollapsed={setCollapsed}
+        setCollapsed={handleCollapsedChange}
         collapsed={collapsed}
       >
         <IconButton
diff --git a/packages/frontend/core/src/modules/explorer/views/tree/node.tsx b/packages/frontend/core/src/modules/explorer/views/tree/node.tsx
index 237e73bf54..1995eb7b48 100644
--- a/packages/frontend/core/src/modules/explorer/views/tree/node.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/tree/node.tsx
@@ -24,10 +24,8 @@ import { assignInlineVars } from '@vanilla-extract/dynamic';
 import clsx from 'clsx';
 import type { To } from 'history';
 import {
-  type Dispatch,
   Fragment,
   type RefAttributes,
-  type SetStateAction,
   useCallback,
   useContext,
   useEffect,
@@ -86,7 +84,7 @@ export const ExplorerTreeNode = ({
   reorderable?: boolean;
   defaultRenaming?: boolean;
   collapsed: boolean;
-  setCollapsed: Dispatch<SetStateAction<boolean>>;
+  setCollapsed: (collapsed: boolean) => void;
   renameable?: boolean;
   onRename?: (newName: string) => void;
   disabled?: boolean;
@@ -285,9 +283,9 @@ export const ExplorerTreeNode = ({
     if (!clickForCollapse) {
       onClick?.();
     } else {
-      setCollapsed(prev => !prev);
+      setCollapsed(!collapsed);
     }
-  }, [clickForCollapse, onClick, setCollapsed]);
+  }, [clickForCollapse, collapsed, onClick, setCollapsed]);
 
   const content = (
     <div