Merge branch 'fix-inoperable-croninput' into 'enterprise'

fix(ui): portals were closing when a nested portal opened

See merge request dkinternal/testgen/dataops-testgen!447

Author: aarthy-dk

testgen/ui/components/frontend/js/components/portal.js

@@ -23,7 +23,7 @@ const Portal = (/** @type Options */ options, ...args) => {
     const { target, targetRelative, align = 'left', position = 'bottom' } = getValue(options);
     const id = `${target}-portal`;
 
-    window.testgen.portals[id] = { domId: id, targetId: target, opened: options.opened };
+    window.testgen.portals[id] = { domId: id, targetId: target, opened: options.opened, close: () => { options.opened.val = false; } };
 
     return () => {
         if (!getValue(options.opened)) {

testgen/ui/static/js/components/portal.js

@@ -18,71 +18,116 @@
 import van from '../van.min.js';
 import { getValue } from '../utils.js';
 
+const { div } = van.tags;
+
 const STREAMLIT_DIALOG_ZINDEX = 1000060;
 const STREAMLIT_DIALOG_CLASS = 'stDialog';
 
 const Portal = (/** @type Options */ options, ...args) => {
     const { target, align = 'left', position = 'bottom' } = getValue(options);
     const id = `${target}-portal`;
-    let portalEl = null;
     let outsideClickHandler = null;
 
     const close = () => { options.opened.val = false; };
 
     window.testgen.portals[id] = { domId: id, targetId: target, opened: options.opened, close };
 
+    // Side-effect derive: manages close loop and outside-click handler.
+    // Kept free of van.add / DOM creation to avoid corrupting VanJS dependency tracking.
     van.derive(() => {
         const isOpen = getValue(options.opened);
 
         if (!isOpen) {
-            portalEl?.remove();
-            portalEl = null;
             if (outsideClickHandler) {
                 document.removeEventListener('click', outsideClickHandler, true);
                 outsideClickHandler = null;
             }
             return;
         }
 
-        // Close other open portals before opening this one
+        const anchor = document.getElementById(target);
+        if (!anchor) return;
+
+        // Close other open portals — skip parent portals that contain our anchor.
+        const toClose = [];
         for (const p of Object.values(window.testgen.portals)) {
-            if (p.domId !== id && getValue(p.opened)) {
-                p.close();
+            if (p.domId !== id && p.opened?.rawVal) {
+                const otherEl = document.getElementById(p.domId);
+                if (otherEl?.contains(anchor)) continue;
+                toClose.push(p);
             }
         }
+        if (toClose.length) {
+            queueMicrotask(() => toClose.forEach(p => { p.opened.val = false; }));
+        }
+
+        if (!outsideClickHandler) {
+            outsideClickHandler = (event) => {
+                const anchor = document.getElementById(target);
+                const portalEl = document.getElementById(id);
+                if (portalEl?.contains(event.target)) return;
+                if (anchor?.contains(event.target)) return;
+                if (isClickInsideChildPortal(event.target, id, portalEl)) return;
+                close();
+            };
+            document.addEventListener('click', outsideClickHandler, true);
+        }
+    });
+
+    // DOM rendering: a VanJS binding on document.body.
+    // VanJS manages the element lifecycle natively — no manual createElement/remove.
+    van.add(document.body, () => {
+        if (!getValue(options.opened)) {
+            return '';
+        }
 
         const anchor = document.getElementById(target);
-        if (!anchor) return;
+        if (!anchor) return '';
 
         const fixed = hasFixedAncestor(anchor);
         const fromDialog = hasStreamlitDialogAncestor(anchor);
-        const zIndex = fromDialog ? (STREAMLIT_DIALOG_ZINDEX + 1) : 1001;
+        const parentPortalEl = getParentPortalElement(anchor, id);
+        const zIndex = parentPortalEl
+            ? (parseInt(parentPortalEl.style.zIndex) || 1001) + 1
+            : fromDialog ? (STREAMLIT_DIALOG_ZINDEX + 1) : 1001;
         const coords = position === 'bottom'
             ? calculateBottomPosition(anchor, align, fixed)
             : calculateTopPosition(anchor, align, fixed);
 
-        if (!portalEl) {
-            portalEl = document.createElement('div');
-            document.body.appendChild(portalEl);
-            van.add(portalEl, ...args);
-
-            outsideClickHandler = (event) => {
-                const anchor = document.getElementById(target);
-                if (!portalEl?.contains(event.target) && !anchor?.contains(event.target)) {
-                    close();
-                }
-            };
-            document.addEventListener('click', outsideClickHandler, true);
-        }
-
-        portalEl.id = id;
-        portalEl.className = getValue(options.class) ?? '';
-        portalEl.style.cssText = `position: ${fixed ? 'fixed' : 'absolute'}; z-index: ${zIndex}; ${coords} ${getValue(options.style) ?? ''}`;
+        return div(
+            {
+                id,
+                class: getValue(options.class) ?? '',
+                style: `position: ${fixed ? 'fixed' : 'absolute'}; z-index: ${zIndex}; ${coords} ${getValue(options.style) ?? ''}`,
+            },
+            ...args,
+        );
     });
 
     return '';
 };
 
+function getParentPortalElement(anchor, selfId) {
+    for (const p of Object.values(window.testgen.portals)) {
+        if (p.domId === selfId) continue;
+        const el = document.getElementById(p.domId);
+        if (el?.contains(anchor)) return el;
+    }
+    return null;
+}
+
+function isClickInsideChildPortal(target, selfId, selfPortalEl) {
+    for (const p of Object.values(window.testgen.portals)) {
+        if (p.domId === selfId) continue;
+        const childEl = document.getElementById(p.domId);
+        if (childEl?.contains(target)) {
+            const childAnchor = document.getElementById(p.targetId);
+            if (selfPortalEl?.contains(childAnchor)) return true;
+        }
+    }
+    return false;
+}
+
 function hasFixedAncestor(el) {
     let node = el.parentElement;
     while (node && node !== document.body) {