From 3041f53e2485b15dbb2e3e5790b04206c8903e9f Mon Sep 17 00:00:00 2001
From: Iuliia Ivashko <yulia.ivashko@gmail.com>
Date: Tue, 17 Mar 2026 02:46:26 +0200
Subject: [PATCH] fix: prevent sidebar drag lock during inline rename (#680)
 (#681)

---
 packages/ui/src/components/session/SessionFolderItem.tsx  | 8 ++++++++
 packages/ui/src/components/session/SessionSidebar.tsx     | 3 +++
 .../components/session/sidebar/SidebarProjectsList.tsx    | 3 ++-
 .../ui/src/components/session/sidebar/sortableItems.tsx   | 5 +++--
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/session/SessionFolderItem.tsx b/packages/ui/src/components/session/SessionFolderItem.tsx
index 87890f45..fa7f624b 100644
--- a/packages/ui/src/components/session/SessionFolderItem.tsx
+++ b/packages/ui/src/components/session/SessionFolderItem.tsx
@@ -174,6 +174,8 @@ const SessionFolderItemBase = <TSessionNode,>({
             <form
               className="flex min-w-0 flex-1 items-center gap-1"
               data-keyboard-avoid="true"
+              onPointerDown={(event) => event.stopPropagation()}
+              onMouseDown={(event) => event.stopPropagation()}
               onSubmit={(event) => {
                 event.preventDefault();
                 handleSaveRename();
@@ -187,6 +189,8 @@ const SessionFolderItemBase = <TSessionNode,>({
                 autoFocus
                 placeholder="Folder name"
                 onClick={(event) => event.stopPropagation()}
+                onPointerDown={(event) => event.stopPropagation()}
+                onMouseDown={(event) => event.stopPropagation()}
                 onKeyDown={(event) => {
                   if (event.key === 'Escape') {
                     event.stopPropagation();
@@ -202,6 +206,8 @@ const SessionFolderItemBase = <TSessionNode,>({
                 type="submit"
                 className="shrink-0 text-muted-foreground hover:text-foreground"
                 onClick={(event) => event.stopPropagation()}
+                onPointerDown={(event) => event.stopPropagation()}
+                onMouseDown={(event) => event.stopPropagation()}
               >
                 <RiCheckLine className="size-4" />
               </button>
@@ -211,6 +217,8 @@ const SessionFolderItemBase = <TSessionNode,>({
                   event.stopPropagation();
                   handleCancelRename();
                 }}
+                onPointerDown={(event) => event.stopPropagation()}
+                onMouseDown={(event) => event.stopPropagation()}
                 className="shrink-0 text-muted-foreground hover:text-foreground"
               >
                 <RiCloseLine className="size-4" />
diff --git a/packages/ui/src/components/session/SessionSidebar.tsx b/packages/ui/src/components/session/SessionSidebar.tsx
index 47ca64e9..b3f25303 100644
--- a/packages/ui/src/components/session/SessionSidebar.tsx
+++ b/packages/ui/src/components/session/SessionSidebar.tsx
@@ -972,6 +972,8 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
     ],
   );
 
+  const isInlineEditing = Boolean(renamingFolderId || editingId || editingProjectId);
+
   return (
     <div
       ref={sessionSearchContainerRef}
@@ -1053,6 +1055,7 @@ export const SessionSidebar: React.FC<SessionSidebarProps> = ({
         settingsAutoCreateWorktree={settingsAutoCreateWorktree}
         getOrderedGroups={getOrderedGroups}
         setGroupOrderByProject={setGroupOrderByProject}
+        isInlineEditing={isInlineEditing}
       />
 
       <NewWorktreeDialog
diff --git a/packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx b/packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx
index de5dfebc..17a58bdf 100644
--- a/packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx
+++ b/packages/ui/src/components/session/sidebar/SidebarProjectsList.tsx
@@ -60,6 +60,7 @@ type Props = {
   settingsAutoCreateWorktree: boolean;
   getOrderedGroups: (projectId: string, groups: SessionGroup[]) => SessionGroup[];
   setGroupOrderByProject: React.Dispatch<React.SetStateAction<Map<string, string[]>>>;
+  isInlineEditing: boolean;
 };
 
 export function SidebarProjectsList(props: Props): React.ReactNode {
@@ -198,7 +199,7 @@ export function SidebarProjectsList(props: Props): React.ReactNode {
                           {orderedGroups.map((group) => {
                             const groupKey = `${projectKey}:${group.id}`;
                             return (
-                              <SortableGroupItem key={group.id} id={group.id}>
+                              <SortableGroupItem key={group.id} id={group.id} disabled={props.isInlineEditing}>
                                 {props.renderGroupSessions(group, groupKey, projectKey)}
                               </SortableGroupItem>
                             );
diff --git a/packages/ui/src/components/session/sidebar/sortableItems.tsx b/packages/ui/src/components/session/sidebar/sortableItems.tsx
index 062a8662..8dabae94 100644
--- a/packages/ui/src/components/session/sidebar/sortableItems.tsx
+++ b/packages/ui/src/components/session/sidebar/sortableItems.tsx
@@ -303,8 +303,9 @@ export const SortableProjectItem: React.FC<SortableProjectItemProps> = ({
 
 const SortableGroupItemBase: React.FC<{
   id: string;
+  disabled?: boolean;
   children: React.ReactNode;
-}> = ({ id, children }) => {
+}> = ({ id, disabled = false, children }) => {
   const {
     attributes,
     listeners,
@@ -312,7 +313,7 @@ const SortableGroupItemBase: React.FC<{
     transform,
     transition,
     isDragging,
-  } = useSortable({ id });
+  } = useSortable({ id, disabled });
 
   return (
     <div