From 381fa0e5a2c2a4e62a02e79b926ee7048695b00b Mon Sep 17 00:00:00 2001
From: tfhuhtal <tuomas.huhtala@icloud.com>
Date: Mon, 7 Oct 2024 14:44:47 +0300
Subject: [PATCH] calling handle save when clicking outside of the editor

---
 client/components/Generic/Textarea.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/client/components/Generic/Textarea.js b/client/components/Generic/Textarea.js
index 213915ee..cdf9493f 100644
--- a/client/components/Generic/Textarea.js
+++ b/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={{