From 03a4a0f2cbc2ce35073142fe2fb9aa48cb8faf0d Mon Sep 17 00:00:00 2001
From: royallsilwallz <royalsilwal@gmail.com>
Date: Fri, 19 Jan 2024 15:41:17 +0545
Subject: [PATCH] Fix popup close issue on mouse drag outside popup in
 `TaskActivityDetail`

- Fixes #6209
---
 .../src/components/taskSelection/taskList.js  |  4 ++
 frontend/src/hooks/UseCloseOnDocumentClick.js | 50 +++++++++++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 frontend/src/hooks/UseCloseOnDocumentClick.js

diff --git a/frontend/src/components/taskSelection/taskList.js b/frontend/src/components/taskSelection/taskList.js
index 08985a586a..43c7cf30d3 100644
--- a/frontend/src/components/taskSelection/taskList.js
+++ b/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
diff --git a/frontend/src/hooks/UseCloseOnDocumentClick.js b/frontend/src/hooks/UseCloseOnDocumentClick.js
new file mode 100644
index 0000000000..3b891ff6d2
--- /dev/null
+++ b/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;
+}