Fix to allow tick button to update a file name

Author: jamiebenstead

src/components/ProjectName/ProjectName.jsx

@@ -74,30 +74,21 @@ const ProjectName = ({
     }
   };
 
+  const handleOnBlur = (event) => {
+    // If the blur event is triggered by clicking the tick button we want to make sure the target is clicked
+    if (event.relatedTarget?.className?.includes("project-name__button")) {
+      const target = event.relatedTarget ? event.relatedTarget : null;
+      target.click();
+    }
+    resetName(event);
+  };
+
   useEffect(() => {
     if (isEditing) {
       nameInput.current.focus();
     }
   });
 
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (
-        isEditing &&
-        nameInput.current &&
-        !nameInput.current.contains(event.target) &&
-        tickButton.current &&
-        !tickButton.current.contains(event.target)
-      ) {
-        resetName(event);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isEditing, nameInput, tickButton, project, resetName]);
-
   return (
     <>
       {showLabel && (
@@ -122,6 +113,7 @@ const ProjectName = ({
             value={name}
             disabled={!isEditing}
             onChange={handleOnChange}
+            onBlur={handleOnBlur}
           />
         ) : (
           <div className="project-name__title">{name}</div>