1 files changed, 29 insertions, 6 deletions
diff --git a/extension/react-app/src/components/UserInputContainer.tsx b/extension/react-app/src/components/UserInputContainer.tsx
index 76a3c615..15f1752f 100644
--- a/extension/react-app/src/components/UserInputContainer.tsx
+++ b/extension/react-app/src/components/UserInputContainer.tsx
@@ -103,7 +103,7 @@ const StyledDiv = styled.div<{ editing: boolean }>`
   z-index: 1;
   overflow: hidden;
   display: grid;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: 1fr auto;
 
   outline: ${(props) => (props.editing ? `1px solid ${lightGray}` : "none")};
   cursor: text;
@@ -114,7 +114,7 @@ const DeleteButtonDiv = styled.div`
   top: 8px;
   right: 8px;
   background-color: ${secondaryDark};
-  box-shadow: 2px 2px 10px ${secondaryDark};
+  box-shadow: 4px 4px 10px ${secondaryDark};
   border-radius: ${defaultBorderRadius};
 `;
 
@@ -123,6 +123,7 @@ const GridDiv = styled.div`
   grid-template-columns: auto 1fr;
   grid-gap: 8px;
   align-items: center;
+  width: 100%;
 `;
 
 function stringWithEllipsis(str: string, maxLen: number) {
@@ -165,7 +166,7 @@ const UserInputContainer = (props: UserInputContainerProps) => {
       divRef.current.innerText = prevContent;
       divRef.current.blur();
     }
-  }, [divRef.current]);
+  }, [divRef.current, prevContent]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -190,6 +191,10 @@ const UserInputContainer = (props: UserInputContainerProps) => {
     divRef.current?.blur();
   };
 
+  const [divTextContent, setDivTextContent] = useState("");
+
+  const checkButtonRef = useRef<HTMLButtonElement>(null);
+
   return (
     <GradientBorder
       loading={props.active}
@@ -243,12 +248,13 @@ const UserInputContainer = (props: UserInputContainerProps) => {
               padding: "8px",
               paddingTop: "4px",
               paddingBottom: "4px",
+              width: "100%",
             }}
           >
             <div
               ref={divRef}
-              onBlur={() => {
-                onBlur();
+              onBlur={(e) => {
+                if (e.relatedTarget !== checkButtonRef.current) onBlur();
               }}
               onKeyDown={(e) => {
                 if (e.key === "Enter" && !e.shiftKey) {
@@ -256,6 +262,9 @@ const UserInputContainer = (props: UserInputContainerProps) => {
                   doneEditing(e);
                 }
               }}
+              onInput={(e) => {
+                setDivTextContent((e.target as any).innerText);
+              }}
               contentEditable={true}
               suppressContentEditableWarning={true}
               className="mr-6 ml-1 cursor-text w-full py-2 flex items-center content-center outline-none"
@@ -271,10 +280,24 @@ const UserInputContainer = (props: UserInputContainerProps) => {
                     <HeaderButtonWithText
                       onClick={(e) => {
                         doneEditing(e);
+                        e.stopPropagation();
                       }}
                       text="Done"
+                      disabled={
+                        divTextContent === "" || divTextContent === prevContent
+                      }
+                      ref={checkButtonRef}
                     >
-                      <CheckIcon width="1.4em" height="1.4em" />
+                      <CheckIcon
+                        width="1.4em"
+                        height="1.4em"
+                        color={
+                          divTextContent === "" ||
+                          divTextContent === prevContent
+                            ? lightGray
+                            : vscForeground
+                        }
+                      />
                     </HeaderButtonWithText>
                   ) : (
                     <>