Enhance useDetectClickOut with extra nodes to cross reference (#2123)

Author: dsuren1

geonode_mapstore_client/client/js/hooks/useDetectClickOut.js

@@ -14,6 +14,7 @@ import { useEffect, useRef } from 'react';
  * Detect a click out event given a target node
  * @name useDetectClickOut
  * @memberof hooks
+ * @prop {string[]} extraNodes extra selectors to check if the click is inside
  * @prop {boolean} disabled ensure the callback is not triggered
  * @prop {function} onClickOut callback on click outside the targeted node
  * @example
@@ -25,6 +26,7 @@ import { useEffect, useRef } from 'react';
  * }
  */
 function useDetectClickOut({
+    extraNodes,
     disabled,
     onClickOut
 }) {
@@ -34,11 +36,15 @@ function useDetectClickOut({
             if (disabled || !node.current) return;
             const target = event.target;
             const isNode = target instanceof Node;
-            if ((isNode && !node.current.contains(target))
-                || document.activeElement === document.querySelector("iframe")
-            ) {
-                onClickOut();
-            }
+
+            // Check if click is inside any extraNodes
+            const isInsideExtra = extraNodes?.some(extra => document.querySelector(extra)?.contains(target));
+
+            const isInsideNode = isNode
+                ? !node.current.contains(target) && !isInsideExtra
+                : document.activeElement === document.querySelector("iframe");
+
+            isInsideNode && onClickOut();
         }
         window.addEventListener('mousedown', handleClickOut);
         window.addEventListener('blur', handleClickOut);

geonode_mapstore_client/client/js/plugins/LayerDetailViewer.jsx

@@ -65,6 +65,7 @@ function LayerDetailViewer({
 }) {
 
     const node = useDetectClickOut({
+        extraNodes: ['.ms-popover-overlay'],
         disabled: !enabled,
         onClickOut: () => {
             onClose();

geonode_mapstore_client/client/js/plugins/ResourceDetails/ResourceDetails.jsx

@@ -300,6 +300,7 @@ function ResourceDetailsPanel({
     }, []);
 
     const node = useDetectClickOut({
+        extraNodes: ['.ms-popover-overlay'],
         disabled: !closeOnClickOut || !show,
         onClickOut: () => {
             handleClose();