calling handle save when clicking outside of the editor

client/components/Generic/Textarea.js

@@ -68,6 +68,7 @@ const Textarea = ({
   const viewOnly = useSelector(({ form }) => form.viewOnly)
   const ref = useRef(null)
   const [changes, setChanges] = useState(false)
+  const editorContainerRef = useRef(null)
 
   const formData = useSelector(({ form }) => form.data)
 
@@ -230,8 +231,23 @@ const Textarea = ({
       }
     }
   }
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (editorContainerRef.current && !editorContainerRef.current.contains(event.target)) {
+        handleSave()
+      }
+    }
+
+    // Bind the event listener to the document
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      // Cleanup the event listener on component unmount
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [editorContainerRef, handleSave])
   return (
-    <div data-cy={`textarea-${id}`} style={{ marginTop: 0 }}>
+    <div data-cy={`textarea-${id}`} style={{ marginTop: 0 }} ref={editorContainerRef}>
       <div
         className="form-text-area"
         style={{