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
getsentry · Sep 26, 2024 · e87c88c · e87c88c
1 parent 4252eba
commit e87c88c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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}
           />