From 80f2d5ae96c61750ac2f0aaa8cb08863ed77e274 Mon Sep 17 00:00:00 2001
From: Shuchang Zheng <wintonzheng0325@gmail.com>
Date: Tue, 26 Nov 2024 08:49:25 -0800
Subject: [PATCH] Fix tooltip weird behavior in editable titles (#1268)

---
 .../nodes/components/EditableNodeTitle.tsx    | 82 ++++++++++---------
 1 file changed, 42 insertions(+), 40 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/components/EditableNodeTitle.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/components/EditableNodeTitle.tsx
index e228ed1b..4072ece0 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/components/EditableNodeTitle.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/components/EditableNodeTitle.tsx
@@ -25,11 +25,11 @@ function EditableNodeTitle({
 }: Props) {
   const [editing, setEditing] = useState(false);
 
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          {!editing ? (
+  if (!editing) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
             <h1
               className={cn("cursor-text", titleClassName)}
               onClick={() => {
@@ -38,41 +38,43 @@ function EditableNodeTitle({
             >
               {value}
             </h1>
-          ) : (
-            <HorizontallyResizingInput
-              disabled={!editable}
-              size={1}
-              autoFocus
-              className={cn("nopan w-min border-0 p-0", inputClassName)}
-              onBlur={(event) => {
-                if (!editable) {
-                  event.currentTarget.value = value;
-                  return;
-                }
-                if (event.currentTarget.value !== value) {
-                  onChange(event.target.value);
-                }
-                setEditing(false);
-              }}
-              onKeyDown={(event) => {
-                if (!editable) {
-                  return;
-                }
-                if (event.key === "Enter") {
-                  event.currentTarget.blur();
-                }
-                if (event.key === "Escape") {
-                  event.currentTarget.value = value;
-                  event.currentTarget.blur();
-                }
-              }}
-              defaultValue={value}
-            />
-          )}
-        </TooltipTrigger>
-        <TooltipContent>Click to edit</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+          </TooltipTrigger>
+          <TooltipContent>Click to edit</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return (
+    <HorizontallyResizingInput
+      disabled={!editable}
+      size={1}
+      autoFocus
+      className={cn("nopan w-min border-0 p-0", inputClassName)}
+      onBlur={(event) => {
+        if (!editable) {
+          event.currentTarget.value = value;
+          return;
+        }
+        if (event.currentTarget.value !== value) {
+          onChange(event.target.value);
+        }
+        setEditing(false);
+      }}
+      onKeyDown={(event) => {
+        if (!editable) {
+          return;
+        }
+        if (event.key === "Enter") {
+          event.currentTarget.blur();
+        }
+        if (event.key === "Escape") {
+          event.currentTarget.value = value;
+          event.currentTarget.blur();
+        }
+      }}
+      defaultValue={value}
+    />
   );
 }