@bryntum/grid-react-thin 7.3.2 → 7.3.4

package/src/WrapperHelper.tsx

@@ -50,6 +50,7 @@ type ReactComponentState = {
 type HTMLElementWithData = HTMLElement & {
     elementData?: any
     lastPortalId?: string | null
+    jsxContainer?: HTMLElement | null
     didSetTextContent?: boolean
 };
 
@@ -515,9 +516,11 @@ function processCellContent(this: { reactComponent: any; isExporting: boolean; $
         else {
             // Create new portal container
             const portalContainer         = DomHelper.append(renderElement, {
-                tag       : 'div',
-                className : portalContainerClass,
-                dataset   : { portalId } // for reference in tests
+                tag           : 'div',
+                className     : portalContainerClass,
+                dataset       : { portalId }, // for reference in tests
+                // We don't want portal container to be reused in the DomConfig flip for this cell
+                retainElement : true
             });
             renderElement.portalContainer = portalContainer;
 
@@ -542,9 +545,27 @@ function processCellContent(this: { reactComponent: any; isExporting: boolean; $
         cellElementData.hasPortal = true;
         portal.generation         = record.generation;
     }
-    else if (!rendererHtml && cellElementData.hasPortal) {
-        cellElement.portalContainer.remove();
-        cellElementData.hasPortal = false;
+    else if (cellElementData.hasPortal) {
+        // The previous JSX cell content can be replaced by DomConfig object so in that case,
+        // we want to delete the previously created portal for JSX. See:
+        // https://github.com/bryntum/support/issues/7862
+        const
+            container     = renderElement.portalContainer || renderElement.querySelector(`.${portalContainerClass}`),
+            ownedPortalId = container?.dataset.portalId,
+            portal        = ownedPortalId && state.portals.get(ownedPortalId);
+
+        if (portal && portal.containerInfo === container) {
+            deletePortal(component, ownedPortalId);
+            flushSync(() => updateGeneration(component, true));
+        }
+        else {
+            // No live portal owns this container. Since retainElement is true,
+            // we have to remove it manually
+            container?.remove();
+        }
+
+        renderElement.portalContainer = null;
+        cellElementData.hasPortal     = false;
     }
 }
 
@@ -1121,9 +1142,16 @@ function processEventContent(this: any, {
                         }) as Element,
                         portal       = ReactDOM.createPortal(jsx, jsxContainer);
 
-                    // Store eventGeneration on the portal to easily determine later if it needs to be updated
+                    // currentData resolves renderData in vertical mode, where eventGeneration lives one level
+                    // deeper than elementData; reading elementData directly would always yield undefined.
                     // @ts-expect-error
-                    portal.eventGeneration = wrap.elementData.eventGeneration;
+                    portal.eventGeneration = currentData.eventGeneration;
+
+                    // Track the container so we can detect below when the event element is replaced while its
+                    // generation is unchanged (orientation switch, constrainDragToTimeline: false drag proxy), leaving
+                    // the portal in a detached container. https://github.com/bryntum/support/issues/13266
+                    // @ts-expect-error
+                    portal.jsxContainer = jsxContainer;
 
                     // Store the React element so that we can reuse it when reusing wrap element
                     wrap.lastJSX = jsx;
@@ -1150,8 +1178,14 @@ function processEventContent(this: any, {
 
             // Recurring events need re-creating always:
             //  - https://github.com/bryntum/support/issues/10595
-            // Re-create portal only if the underlying eventRecord changed its generation or if exporting
-            if (!portal || isRecurring || isExporting || portal.eventGeneration !== wrap.elementData.eventGeneration || this.$isExpanding) {
+            // Re-create portal only if the underlying eventRecord changed its generation or if exporting.
+            // Use currentData.eventGeneration (not wrap.elementData.eventGeneration): in vertical mode
+            // eventGeneration lives in elementData.renderData, so wrap.elementData.eventGeneration is always
+            // undefined and stale portals would never be detected.
+            // Also re-create when the container is detached: generation can be unchanged while the event element
+            // is replaced (orientation switch, constrainDragToTimeline: false drag proxy).
+            // https://github.com/bryntum/support/issues/13266
+            if (!portal || isRecurring || isExporting || portal.eventGeneration !== currentData.eventGeneration || this.$isExpanding || !parent?.contains(portal.jsxContainer)) {
                 if ((scrolling || !isDragging) && !isEditing) {
                     updateContent();
                 }
@@ -1173,7 +1207,7 @@ function processEventContent(this: any, {
  */
 function processResourceHeader(
     { jsx, targetElement }:
-    { jsx: ReactElement; targetElement: HTMLElement }): void {
+    { jsx: ReactElement; targetElement: HTMLElementWithData }): void {
 
     if (!jsx) {
         return;
@@ -1186,19 +1220,36 @@ function processResourceHeader(
         { portals }        = state,
         portalId           = `resource-header-${targetElement.dataset.resourceId}`;
 
-    // Delete portal if we already have one
-    if (portals.has(portalId)) {
-        portals.delete(portalId);
-
-        // Update the generation (force React re-rendering) in this tick
-        updateGeneration(reactComponent, true);
+    // Render the JSX into a retained container instead of straight into the header cell. DomSync owns the
+    // header cell and, on every re-sync (e.g. when resizing the resource columns), it releases any DOM children
+    // it did not create itself - adding the `b-released` class which hides the React-rendered content. A
+    // `b-jsx-container` flagged with `retainElement` is left untouched by DomSync. The container is given
+    // `display: contents` so it stays transparent to the header cell's flex layout.
+    // The container is cached on the cell rather than queried from the DOM each pass.
+    let jsxContainer = targetElement.jsxContainer;
+
+    if (!jsxContainer) {
+        // Clear any plain content DomSync may have placed in the cell before hosting the portal
+        targetElement.textContent = '';
+        targetElement.jsxContainer = jsxContainer = DomHelper.createElement({
+            className     : 'b-jsx-container',
+            parent        : targetElement,
+            retainElement : true,
+            style         : { display : 'contents' }
+        }) as HTMLElement;
+    }
+    // When a header cell is reused for a different resource, drop the now stale portal
+    else if (targetElement.lastPortalId && targetElement.lastPortalId !== portalId) {
+        portals.delete(targetElement.lastPortalId);
     }
 
-    portals.set(portalId, ReactDOM.createPortal(jsx, targetElement));
-
-    // Trigger the React portals re-rendering in the next animation frame
-    updateGeneration(reactComponent);
+    // (Re)create the portal so resource record changes are reflected. Setting the same
+    // id replaces any existing portal, so no explicit delete is needed beforehand.
+    portals.set(portalId, ReactDOM.createPortal(jsx, jsxContainer));
+    targetElement.lastPortalId = portalId;
 
+    // Force React to re-render the portals in this tick
+    updateGeneration(reactComponent, true);
 }
 
 /**