From 8ea596b1e949eb27726f4c6c8e738bfa153c550b Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 16 May 2024 22:13:02 +1000
Subject: [PATCH] fix(ui): janky editable field title

- Do not allow whitespace-only field titles
- Make only preview text trigger editable
- Tooltip over the preview, not the whole "row"
---
 .../Invocation/fields/EditableFieldTitle.tsx  | 51 +++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
index e02b1a1474..04bcd81db8 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx
@@ -37,7 +37,8 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
   const [localTitle, setLocalTitle] = useState(label || fieldTemplateTitle || t('nodes.unknownField'));
 
   const handleSubmit = useCallback(
-    async (newTitle: string) => {
+    async (newTitleRaw: string) => {
+      const newTitle = newTitleRaw.trim();
       if (newTitle && (newTitle === label || newTitle === fieldTemplateTitle)) {
         return;
       }
@@ -57,22 +58,22 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
   }, [label, fieldTemplateTitle, t]);
 
   return (
-    <Tooltip
-      label={withTooltip ? <FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="inputs" /> : undefined}
-      openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
+    <Editable
+      value={localTitle}
+      onChange={handleChange}
+      onSubmit={handleSubmit}
+      as={Flex}
+      ref={ref}
+      position="relative"
+      overflow="hidden"
+      alignItems="center"
+      justifyContent="flex-start"
+      gap={1}
+      w="full"
     >
-      <Editable
-        value={localTitle}
-        onChange={handleChange}
-        onSubmit={handleSubmit}
-        as={Flex}
-        ref={ref}
-        position="relative"
-        overflow="hidden"
-        alignItems="center"
-        justifyContent="flex-start"
-        gap={1}
-        w="full"
+      <Tooltip
+        label={withTooltip ? <FieldTooltipContent nodeId={nodeId} fieldName={fieldName} kind="inputs" /> : undefined}
+        openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
       >
         <EditablePreview
           fontWeight="semibold"
@@ -80,10 +81,10 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
           noOfLines={1}
           color={isMissingInput ? 'error.300' : 'base.300'}
         />
-        <EditableInput className="nodrag" sx={editableInputStyles} />
-        <EditableControls />
-      </Editable>
-    </Tooltip>
+      </Tooltip>
+      <EditableInput className="nodrag" sx={editableInputStyles} />
+      <EditableControls />
+    </Editable>
   );
 });
 
@@ -127,7 +128,15 @@ const EditableControls = memo(() => {
   }
 
   return (
-    <Flex onClick={handleClick} position="absolute" w="full" h="full" top={0} insetInlineStart={0} cursor="text" />
+    <Flex
+      onClick={handleClick}
+      position="absolute"
+      w="min-content"
+      h="full"
+      top={0}
+      insetInlineStart={0}
+      cursor="text"
+    />
   );
 });