Set closeOnClickOut for ResourcesDetails inside viewers (#2101)

Author: dsuren1

geonode_mapstore_client/client/js/hooks/useDetectClickOut.js

@@ -31,14 +31,20 @@ function useDetectClickOut({
     const node = useRef();
     useEffect(() => {
         function handleClickOut(event) {
-            const nodeContains = !disabled && node?.current?.contains;
-            if (nodeContains && !node.current.contains(event.target)) {
+            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();
             }
         }
         window.addEventListener('mousedown', handleClickOut);
+        window.addEventListener('blur', handleClickOut);
         return () => {
             window.removeEventListener('mousedown', handleClickOut);
+            window.removeEventListener('blur', handleClickOut);
         };
     }, [ disabled, node, onClickOut ]);
     return node;

geonode_mapstore_client/static/mapstore/configs/localConfig.json

@@ -687,7 +687,8 @@
                 "cfg": {
                     "headerNodeSelector": ".gn-main-header",
                     "containerPosition": "header",
-                    "defaultOpen": true
+                    "defaultOpen": true,
+                    "closeOnClickOut": true
                 }
             },
             {
@@ -1575,7 +1576,8 @@
                 "name": "ResourceDetails",
                 "cfg": {
                     "headerNodeSelector": ".gn-main-header",
-                    "containerPosition": "header"
+                    "containerPosition": "header",
+                    "closeOnClickOut": true
                 }
             },
             {
@@ -2263,7 +2265,8 @@
                 "name": "ResourceDetails",
                 "cfg": {
                     "headerNodeSelector": ".gn-main-header",
-                    "containerPosition": "header"
+                    "containerPosition": "header",
+                    "closeOnClickOut": true
                 }
             },
             {
@@ -2480,7 +2483,8 @@
                 "cfg": {
                     "headerNodeSelector": ".gn-main-header",
                     "containerPosition": "header",
-                    "defaultOpen": true
+                    "defaultOpen": true,
+                    "closeOnClickOut": true
                 }
             },
             {
@@ -2605,7 +2609,8 @@
                 "name": "ResourceDetails",
                 "cfg": {
                     "headerNodeSelector": ".gn-main-header",
-                    "containerPosition": "header"
+                    "containerPosition": "header",
+                    "closeOnClickOut": true
                 }
             },
             {
@@ -3433,7 +3438,8 @@
                 "name": "ResourceDetails",
                 "cfg": {
                     "headerNodeSelector": ".gn-main-header",
-                    "containerPosition": "header"
+                    "containerPosition": "header",
+                    "closeOnClickOut": true
                 }
             },
             {