I am aware that auto-resizing does not work when using a React component-based custom renderer.
(Your `HotTable` configuration includes `autoRowSize`/`autoColumnSize` options, which are not compatible with the component-based renderers`. Disable `autoRowSize` and `autoColumnSize` to prevent row and column misalignment.)
However, I am curious about what specific issues arise.
From what I understand, because React’s DOM commit is asynchronous, the timing for auto-resizing to take effect is delayed by one beat (the size is only reflected after N ms of re-rendering following cell modification).
1. Are there any other issues besides this?
2. Would it cause problems if we calculate the size synchronously within `__internalRenderer` for ghost-table cases, as shown below?
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 (renderedCellCache.current.has(key)) {
TD.innerHTML = renderedCellCache.current.get(key).innerHTML;
}
/***********************************************************************************
/* If it is a GhostTable (hidden table for size measurement),
/* waiting for React's commit causes measurement to occur asynchronously,
/* resulting in inaccurate size data. Therefore, rendering is processed synchronously and returned.
/**********************************************************************************/
/**/ if (TD && TD.getAttribute('ghost-table')) {
/**/ try {
/**/ if (Renderer) {
/**/ var el = React.createElement(Renderer, {
/**/ instance: instance,
/**/ TD: TD,
/**/ row: row,
/**/ col: col,
/**/ prop: prop,
/**/ value: value,
/**/ cellProperties: cellProperties
/**/ });
/**/ var staticHtml = ReactDOMServer.renderToStaticMarkup(el);
/**/ TD.innerHTML = staticHtml;
/**/ } else {
/**/ TD.textContent = value;
/**/ }
/**/ } catch (e) {
/**/ TD.textContent = value;
/**/ }
/**/ renderedCellCache.current.set("".concat(row, "-").concat(col), TD);
/**/ return TD;
/**/ }
/********************************************************************************/
if (TD && !TD.getAttribute('ghost-table')) {
var cachedPortal = portalCache.current.get(portalKey);
var cachedPortalContainer = portalContainerCache.current.get(portalContainerKey);
while (TD.firstChild) {
TD.removeChild(TD.firstChild);
}
// if portal already exists, do not recreate
if (cachedPortal && cachedPortalContainer) {
TD.appendChild(cachedPortalContainer);
} else {
var rendererElement = React.createElement(Renderer, {
instance: instance,
TD: TD,
row: row,
col: col,
prop: prop,
value: value,
cellProperties: cellProperties
});
var _createPortal = createPortal(rendererElement, TD.ownerDocument, portalKey, cachedPortalContainer),
portal = _createPortal.portal,
portalContainer = _createPortal.portalContainer;
portalContainerCache.current.set(portalContainerKey, portalContainer);
TD.appendChild(portalContainer);
portalCache.current.set(portalKey, portal);
}
}
renderedCellCache.current.set("".concat(row, "-").concat(col), TD);
return TD;
};