@handsontable/react-wrapper 0.0.0-next-1f594fb-20260826 → 0.0.0-next-9072500-20260826

package/commonjs/react-handsontable.js

@@ -563,15 +563,53 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
   var getPortalContainerCacheSize = React.useCallback(function () {
     return portalContainerCache.current.size;
   }, []);
+
+  // Stable id per table element the grid draws into. Handsontable renders the
+  // same cell once per table it appears in — the master table plus an overlay
+  // table for every fixed row/column edge — and each draw gets its own TD.
+  var tableIds = React.useRef(new WeakMap());
+  var nextTableId = React.useRef(0);
+
+  /**
+   * Identify the table a rendered cell belongs to, so the master table and the
+   * overlay tables get separate portal containers for the same cell.
+   *
+   * @param {HTMLTableCellElement} TD The cell being rendered.
+   * @returns {Number} The id of the table the cell belongs to.
+   */
+  var getTableId = React.useCallback(function (TD) {
+    var _TD$parentElement$par, _TD$parentElement;
+    // TD -> TR -> TBODY. The section belongs to exactly one table, and the
+    // overlay tables are built once and never hand their cells to another
+    // table, so it is a stable identity for the draw. Two property hops rather
+    // than a selector walk, because this runs for every component-rendered
+    // cell on every render.
+    var tableSection = (_TD$parentElement$par = (_TD$parentElement = TD.parentElement) === null || _TD$parentElement === void 0 ? void 0 : _TD$parentElement.parentElement) !== null && _TD$parentElement$par !== void 0 ? _TD$parentElement$par : TD;
+    var cachedId = tableIds.current.get(tableSection);
+    if (cachedId !== undefined) {
+      return cachedId;
+    }
+    var id = nextTableId.current;
+    nextTableId.current += 1;
+    tableIds.current.set(tableSection, id);
+    return id;
+  }, []);
   var getRendererWrapper = React.useCallback(function (Renderer) {
     return function __internalRenderer(instance, TD, row, col, prop, value, cellProperties) {
       var key = "".concat(row, "-").concat(col);
 
       // Handsontable.Core type is missing guid
       var instanceGuid = instance.guid;
-      var portalContainerKey = "".concat(instanceGuid, "-").concat(key);
-      var portalKey = "".concat(key, "-").concat(instanceGuid);
       if (TD && !TD.getAttribute('ghost-table')) {
+        // The table has to be part of the key. A cell that sits in a fixed
+        // column is drawn both in the master table and in the inline-start
+        // overlay; keyed by coordinates alone, both draws share one container,
+        // which then moves into whichever table rendered last and leaves the
+        // other cell empty. The two tables then size their rows from different
+        // content and stop lining up (see issue #9063).
+        var tableId = getTableId(TD);
+        var portalContainerKey = "".concat(instanceGuid, "-").concat(tableId, "-").concat(key);
+        var portalKey = "".concat(key, "-").concat(tableId, "-").concat(instanceGuid);
         var cachedPortalContainer = portalContainerCache.current.get(portalContainerKey);
         // When the cached portal container is still attached to the same
         // TD as the previous render, the DOM is already correct and must
@@ -604,7 +642,7 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
       renderedCellCache.current.set(key, TD);
       return TD;
     };
-  }, []);
+  }, [getTableId]);
   var renderersPortalManager = React.useRef(function () {
     return undefined;
   });
@@ -1108,7 +1146,7 @@ var HotColumn = function HotColumn(props) {
   }, editorPortal);
 };
 
-var version="0.0.0-next-1f594fb-20260826";
+var version="0.0.0-next-9072500-20260826";
 
 /**
  * Component used to manage the renderer component portals.

package/dist/react-handsontable.js

@@ -25,7 +25,7 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  * 
- * Version: 0.0.0-next-1f594fb-20260826 (built at Wed Aug 26 2026 09:35:22 GMT+0000 (Coordinated Universal Time))
+ * Version: 0.0.0-next-9072500-20260826 (built at Wed Aug 26 2026 11:28:35 GMT+0000 (Coordinated Universal Time))
  */
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('handsontable/base'), require('handsontable/renderers/registry'), require('handsontable/editors/registry')) :
@@ -588,15 +588,53 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
   var getPortalContainerCacheSize = React.useCallback(function () {
     return portalContainerCache.current.size;
   }, []);
+
+  // Stable id per table element the grid draws into. Handsontable renders the
+  // same cell once per table it appears in — the master table plus an overlay
+  // table for every fixed row/column edge — and each draw gets its own TD.
+  var tableIds = React.useRef(new WeakMap());
+  var nextTableId = React.useRef(0);
+
+  /**
+   * Identify the table a rendered cell belongs to, so the master table and the
+   * overlay tables get separate portal containers for the same cell.
+   *
+   * @param {HTMLTableCellElement} TD The cell being rendered.
+   * @returns {Number} The id of the table the cell belongs to.
+   */
+  var getTableId = React.useCallback(function (TD) {
+    var _TD$parentElement$par, _TD$parentElement;
+    // TD -> TR -> TBODY. The section belongs to exactly one table, and the
+    // overlay tables are built once and never hand their cells to another
+    // table, so it is a stable identity for the draw. Two property hops rather
+    // than a selector walk, because this runs for every component-rendered
+    // cell on every render.
+    var tableSection = (_TD$parentElement$par = (_TD$parentElement = TD.parentElement) === null || _TD$parentElement === void 0 ? void 0 : _TD$parentElement.parentElement) !== null && _TD$parentElement$par !== void 0 ? _TD$parentElement$par : TD;
+    var cachedId = tableIds.current.get(tableSection);
+    if (cachedId !== undefined) {
+      return cachedId;
+    }
+    var id = nextTableId.current;
+    nextTableId.current += 1;
+    tableIds.current.set(tableSection, id);
+    return id;
+  }, []);
   var getRendererWrapper = React.useCallback(function (Renderer) {
     return function __internalRenderer(instance, TD, row, col, prop, value, cellProperties) {
       var key = "".concat(row, "-").concat(col);
 
       // Handsontable.Core type is missing guid
       var instanceGuid = instance.guid;
-      var portalContainerKey = "".concat(instanceGuid, "-").concat(key);
-      var portalKey = "".concat(key, "-").concat(instanceGuid);
       if (TD && !TD.getAttribute('ghost-table')) {
+        // The table has to be part of the key. A cell that sits in a fixed
+        // column is drawn both in the master table and in the inline-start
+        // overlay; keyed by coordinates alone, both draws share one container,
+        // which then moves into whichever table rendered last and leaves the
+        // other cell empty. The two tables then size their rows from different
+        // content and stop lining up (see issue #9063).
+        var tableId = getTableId(TD);
+        var portalContainerKey = "".concat(instanceGuid, "-").concat(tableId, "-").concat(key);
+        var portalKey = "".concat(key, "-").concat(tableId, "-").concat(instanceGuid);
         var cachedPortalContainer = portalContainerCache.current.get(portalContainerKey);
         // When the cached portal container is still attached to the same
         // TD as the previous render, the DOM is already correct and must
@@ -629,7 +667,7 @@ var HotTableContextProvider = function HotTableContextProvider(_ref) {
       renderedCellCache.current.set(key, TD);
       return TD;
     };
-  }, []);
+  }, [getTableId]);
   var renderersPortalManager = React.useRef(function () {
     return undefined;
   });
@@ -1133,7 +1171,7 @@ var HotColumn = function HotColumn(props) {
   }, editorPortal);
 };
 
-var version="0.0.0-next-1f594fb-20260826";
+var version="0.0.0-next-9072500-20260826";
 
 /**
  * Component used to manage the renderer component portals.