Merge pull request #6211 from hotosm/fix/6209-comment-reset-on-mouse-…

…drag-outside-popup

fix/6209 comment reset on mouse drag outside popup

frontend/src/components/taskSelection/taskList.js

@@ -16,6 +16,7 @@ import { LockIcon, ListIcon, ZoomPlusIcon, CloseIcon, InternalLinkIcon } from '.
 import { PaginatorLine, howManyPages } from '../paginator';
 import { Dropdown } from '../dropdown';
 import { TextField } from '../formInputs';
+import useCloseOnDocumentClick from '../../hooks/UseCloseOnDocumentClick';
 
 export function TaskStatus({ status, lockHolder }: Object) {
   const isReadyOrLockedForMapping = ['READY', 'LOCKED_FOR_MAPPING'].includes(status);
@@ -63,6 +64,8 @@ export function TaskItem({
   const location = useLocation();
   const { value, unit } = selectUnit(new Date(data.actionDate));
 
+  const closeOnDocumentClick = useCloseOnDocumentClick();
+
   const handleCopyToClipboard = () =>
     navigator.clipboard
       .writeText(`${window.location.origin}${location.pathname}?search=${data.taskId}`)
@@ -117,6 +120,7 @@ export function TaskItem({
                   <ListIcon width="18px" height="18px" className="pointer hover-blue-grey" />
                 </div>
               }
+              closeOnDocumentClick={closeOnDocumentClick}
             >
               {(close) => (
                 <TaskActivityDetail

frontend/src/hooks/UseCloseOnDocumentClick.js

@@ -0,0 +1,50 @@
+// https://github.com/yjose/reactjs-popup/issues/174
+import { useEffect, useState } from 'react';
+
+/**
+ * This hook is a workaround for an issue in reactjs-popup
+ *
+ * What this hook does is:
+ *
+ * - on mouse down inside the popup, set closeOnDocumentClick to false
+ * - on mouse up, set closeOnDocumentClick to true
+ *
+ * Usage:
+ *
+ *    const closeOnDocumentClick = useCloseOnDocumentClick()
+ *
+ *    return (
+ *      <Popup ... closeOnDocumentClick={closeOnDocumentClick} >
+ *        ...
+ *      </Popup>
+ *    )
+ */
+export default function useCloseOnDocumentClick() {
+  const [closeOnDocumentClick, setCloseOnDocumentClick] = useState(true);
+
+  useEffect(() => {
+    function insidePopupContents(target: any): boolean {
+      return target.querySelector('.popup-content') == null;
+    }
+
+    function handleMouseDown(event: MouseEvent) {
+      if (insidePopupContents(event.target)) {
+        setCloseOnDocumentClick(false);
+      }
+    }
+
+    function handleMouseUp() {
+      setTimeout(() => setCloseOnDocumentClick(true));
+    }
+
+    window.document.addEventListener('mousedown', handleMouseDown);
+    window.document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      window.document.removeEventListener('mousedown', handleMouseDown);
+      window.document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [setCloseOnDocumentClick]);
+
+  return closeOnDocumentClick;
+}