From e87c88cfba3dd9a257962937130b9f18be5ffe67 Mon Sep 17 00:00:00 2001
From: Michael Sun <55160142+MichaelSun48@users.noreply.github.com>
Date: Thu, 26 Sep 2024 10:28:15 -0700
Subject: [PATCH] fix(issue-views): Fix bug where renaming is triggered on
 single click (#78215)

Fixes a bug where renaming would be triggered on a single click of the
tab title, rather than only on a double click. This caused some very
janky and unexpected interactions with dragging the tab. This is pretty
hard to demo in a video, so to see the difference, try dragging a tab in
prod, then try dragging a tab in the vercel deployment
---
 .../app/components/draggableTabs/draggableTabList.tsx  |  5 +++++
 .../issueList/groupSearchViewTabs/draggableTabBar.tsx  |  1 +
 .../issueList/groupSearchViewTabs/editableTabTitle.tsx | 10 ++++++++--
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/static/app/components/draggableTabs/draggableTabList.tsx b/static/app/components/draggableTabs/draggableTabList.tsx
index 9675cc3e8c0310..b2bec19953f332 100644
--- a/static/app/components/draggableTabs/draggableTabList.tsx
+++ b/static/app/components/draggableTabs/draggableTabList.tsx
@@ -132,6 +132,7 @@ function Tabs({
   hoveringKey,
   setHoveringKey,
   tempTabActive,
+  editingTabKey,
 }: {
   ariaProps: AriaTabListOptions<DraggableTabListItemProps>;
   hoveringKey: Key | 'addView' | null;
@@ -145,6 +146,7 @@ function Tabs({
   tempTabActive: boolean;
   className?: string;
   disabled?: boolean;
+  editingTabKey?: string;
   onChange?: (key: string | number) => void;
   tabVariant?: BaseTabProps['variant'];
   value?: string | number;
@@ -230,6 +232,7 @@ function Tabs({
               dragTransition={{bounceStiffness: 400, bounceDamping: 40}} // Recovers spring behavior thats lost when using dragElastic=0
               transition={{delay: -0.1}} // Skips the first few frames of the animation that make the tab appear to shrink before growing
               layout
+              drag={item.key !== editingTabKey} // Disable dragging if the tab is being edited
               onDrag={() => setIsDragging(true)}
               onDragEnd={() => setIsDragging(false)}
               onHoverStart={() => setHoveringKey(item.key)}
@@ -331,6 +334,7 @@ function BaseDraggableTabList({
         hoveringKey={hoveringKey}
         setHoveringKey={setHoveringKey}
         tempTabActive={!!tempTab}
+        editingTabKey={props.editingTabKey}
       />
       <AddViewTempTabWrap ref={addViewTempTabRef}>
         <AddViewMotionWrapper
@@ -389,6 +393,7 @@ export interface DraggableTabListProps
     TabListStateOptions<DraggableTabListItemProps> {
   onReorder: (newOrder: Node<DraggableTabListItemProps>[]) => void;
   className?: string;
+  editingTabKey?: string;
   hideBorder?: boolean;
   onAddView?: React.MouseEventHandler;
   outerWrapStyles?: React.CSSProperties;
diff --git a/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx b/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx
index 8563539549d260..94b7b3398ae538 100644
--- a/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx
+++ b/static/app/views/issueList/groupSearchViewTabs/draggableTabBar.tsx
@@ -407,6 +407,7 @@ export function DraggableTabBar({
       defaultSelectedKey={initialTabKey}
       onAddView={handleCreateNewView}
       orientation="horizontal"
+      editingTabKey={editingTabKey ?? undefined}
       hideBorder
     >
       {allTabs.map(tab => (
diff --git a/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx b/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx
index d791e1b6b06962..25e3cc5e8a3f40 100644
--- a/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx
+++ b/static/app/views/issueList/groupSearchViewTabs/editableTabTitle.tsx
@@ -76,6 +76,7 @@ function EditableTabTitle({
     if (isEditing) {
       requestAnimationFrame(() => {
         inputRef.current?.focus();
+        inputRef.current?.select();
       });
     } else {
       inputRef.current?.blur();
@@ -94,17 +95,22 @@ function EditableTabTitle({
             value={inputValue}
             onChange={handleOnChange}
             onKeyDown={handleOnKeyDown}
-            onDoubleClick={() => isSelected && setIsEditing(true)}
+            onDoubleClick={() => setIsEditing(true)}
             onBlur={handleOnBlur}
             ref={inputRef}
             style={memoizedStyles}
             isEditing={isEditing}
-            onFocus={e => e.target.select()}
             onPointerDown={e => {
               e.stopPropagation();
+              if (!isEditing) {
+                e.preventDefault();
+              }
             }}
             onMouseDown={e => {
               e.stopPropagation();
+              if (!isEditing) {
+                e.preventDefault();
+              }
             }}
             maxLength={128}
           />