handsontable 18.0.0 → 18.1.0-rc1

package/helpers/dom/cellCoords.mjs

@@ -21,7 +21,7 @@ import { throwWithCause } from '../errors.mjs';
             return column;
         }
         accumulatedX += width;
-        const { colspan } = hotInstance.getCellMeta(row, column);
+        const { colspan } = hotInstance.getCellMetaTransient(row, column);
         if (colspan !== undefined && colspan > 1) {
             column += colspan - 1;
         }
@@ -49,13 +49,117 @@ import { throwWithCause } from '../errors.mjs';
             return row;
         }
         accumulatedY += height;
-        const { rowspan } = hotInstance.getCellMeta(row, column);
+        const { rowspan } = hotInstance.getCellMetaTransient(row, column);
         if (rowspan !== undefined && rowspan > 1) {
             row += rowspan - 1;
         }
     }
     return null;
 }
+/**
+ * Finds a column suitable for mapping a Y coordinate to a row: the first column in the range
+ * whose cells across the scanned rows each occupy their own single row. `findRowAtY` walks one
+ * column's cell heights and skips a merged cell's spanned rows, so it is distorted by a cell
+ * that spans multiple rows — a vertical-merge anchor or any of its slaves. Such a column is
+ * detected two ways: `rowspan > 1` on the anchor's meta, and element identity, since every row
+ * inside a vertical merge resolves to the same rendered cell. A purely horizontal merge resolves
+ * to a distinct, single-row master cell per row, so its columns stay valid. A merge in one column
+ * must not distort the row lookup used for other columns (DEV-2115).
+ *
+ * The scanned row range must match the range the returned column will be walked over (the frozen
+ * overlays and the scrollable body are resolved separately), so a merge confined to frozen rows
+ * cannot leak into the body lookup or vice versa.
+ *
+ * @param {Handsontable} hotInstance The Handsontable instance.
+ * @param {number} startColumn First column to consider.
+ * @param {number} endColumn Last column to consider (inclusive).
+ * @param {number} startRow First row of the scanned range.
+ * @param {number} endRow Last row of the scanned range (inclusive).
+ * @returns {number} A column index free of vertical-merge distortion, or `startColumn` if none qualifies.
+ */ function findRowReferenceColumn(hotInstance, startColumn, endColumn, startRow, endRow) {
+    for(let column = startColumn; column <= endColumn; column++){
+        let spansMultipleRows = false;
+        let hasRenderableCell = false;
+        let previousCell = null;
+        for(let row = startRow; row <= endRow; row++){
+            const cell = hotInstance.getCell(row, column, true);
+            const { rowspan } = hotInstance.getCellMetaTransient(row, column);
+            // A vertically merged cell reports `rowspan > 1` on its anchor and resolves to the same
+            // rendered element for every row it covers; either signal marks the column as distorting.
+            if (rowspan !== undefined && rowspan > 1 || cell !== null && cell === previousCell) {
+                spansMultipleRows = true;
+                break;
+            }
+            if (cell !== null) {
+                previousCell = cell;
+                hasRenderableCell = true;
+            }
+        }
+        // A hidden column (e.g. `hiddenColumns`) renders no cells, so `findRowAtY` cannot measure
+        // against it. Require at least one renderable cell so a hidden column between the merged
+        // column and a usable one is skipped rather than picked as the reference.
+        if (!spansMultipleRows && hasRenderableCell) {
+            return column;
+        }
+    }
+    // Best-effort fallback: every column in the scanned range is vertically merged (e.g. a grouped
+    // report grid whose visible columns all merge across the same band). No column is free of the
+    // distortion, so `findRowAtY` will still collapse the band onto its anchor — `startColumn` is
+    // simply the least-surprising choice. This is a known narrow case of DEV-2115, not a bug here.
+    return startColumn;
+}
+/**
+ * Finds a row suitable for mapping an X coordinate to a column: the first row in the range
+ * whose cells across the scanned columns each occupy their own single column. `findColumnAtX`
+ * walks one row's cell widths and skips a merged cell's spanned columns, so it is distorted by a
+ * cell that spans multiple columns - a horizontal-merge anchor or any of its slaves. Such a row
+ * is detected two ways: `colspan > 1` on the anchor's meta, and element identity, since every
+ * column inside a horizontal merge resolves to the same rendered cell. A purely vertical merge
+ * resolves to a distinct, single-column master cell per column, so its rows stay valid. A merge
+ * in one row must not distort the column lookup used for other rows (DEV-2124).
+ *
+ * The scanned column range must match the range the returned row will be walked over (the frozen
+ * overlays and the scrollable body are resolved separately), so a merge confined to frozen
+ * columns cannot leak into the body lookup or vice versa.
+ *
+ * @param {Handsontable} hotInstance The Handsontable instance.
+ * @param {number} startRow First row to consider.
+ * @param {number} endRow Last row to consider (inclusive).
+ * @param {number} startColumn First column of the scanned range.
+ * @param {number} endColumn Last column of the scanned range (inclusive).
+ * @returns {number} A row index free of horizontal-merge distortion, or `startRow` if none qualifies.
+ */ function findColumnReferenceRow(hotInstance, startRow, endRow, startColumn, endColumn) {
+    for(let row = startRow; row <= endRow; row++){
+        let spansMultipleColumns = false;
+        let hasRenderableCell = false;
+        let previousCell = null;
+        for(let column = startColumn; column <= endColumn; column++){
+            const cell = hotInstance.getCell(row, column, true);
+            const { colspan } = hotInstance.getCellMetaTransient(row, column);
+            // A horizontally merged cell reports `colspan > 1` on its anchor and resolves to the same
+            // rendered element for every column it covers; either signal marks the row as distorting.
+            if (colspan !== undefined && colspan > 1 || cell !== null && cell === previousCell) {
+                spansMultipleColumns = true;
+                break;
+            }
+            if (cell !== null) {
+                previousCell = cell;
+                hasRenderableCell = true;
+            }
+        }
+        // A hidden row (e.g. `hiddenRows`) renders no cells, so `findColumnAtX` cannot measure
+        // against it. Require at least one renderable cell so a hidden row between the merged
+        // row and a usable one is skipped rather than picked as the reference.
+        if (!spansMultipleColumns && hasRenderableCell) {
+            return row;
+        }
+    }
+    // Best-effort fallback: every row in the scanned range is horizontally merged (e.g. a banded
+    // report grid whose visible rows all merge across the same columns). No row is free of the
+    // distortion, so `findColumnAtX` will still collapse the band onto its anchor - `startRow` is
+    // simply the least-surprising choice. This is a known narrow case of DEV-2124, not a bug here.
+    return startRow;
+}
 /**
  * Get the cell coordinates from the mouse position. When the mouse is outside of the table,
  * the nearest cell is returned.
@@ -99,6 +203,20 @@ import { throwWithCause } from '../errors.mjs';
     const tableViewportBottom = view.isVerticallyScrollableByWindow() ? rootWindow.innerHeight : tableOffset.top + view.getViewportHeight() + columnHeaderHeight;
     const clampedX = clamp(mouseX, tableViewportLeft, tableViewportRight);
     const clampedY = clamp(mouseY, tableViewportTop, tableViewportBottom);
+    // Resolve the column against a row that has no horizontal merge across the columns being
+    // walked. `findColumnAtX` skips a merged cell's spanned columns, so measuring against a
+    // horizontally merged row collapses every X inside the band onto the merge anchor - and when
+    // the anchor is scrolled out of view the band's full width is counted once per slave column.
+    // Neither a fixed row nor the pointer's row is universally safe (a merge can live in either),
+    // so each column-scan branch picks the first row free of horizontal merges within its own
+    // column range (DEV-2124).
+    const columnReferenceRowStart = firstPartiallyVisibleRow ?? 0;
+    // When the viewport query returns null nothing is rendered, so there is no cell to measure
+    // against. Keep the search inside the (empty) rendered range instead of opening it to every
+    // row in the grid - otherwise `findColumnReferenceRow` walks the full row x column product,
+    // calling `getCellMetaTransient` on each step, and a single held autofill/`dragToScroll` drag
+    // on a large off-screen grid locks the tab.
+    const columnReferenceRowEnd = lastPartiallyVisibleRow ?? columnReferenceRowStart;
     let foundColumn = null;
     // Check fixed columns first
     if (numberOfFixedColumnsStart > 0) {
@@ -106,21 +224,23 @@ import { throwWithCause } from '../errors.mjs';
         const lastFixedColumn = columnIndexMapper.getVisualFromRenderableIndex(numberOfFixedColumnsStart - 1);
         const firstNonHiddenColumn = firstFixedColumn !== null ? columnIndexMapper.getNearestNotHiddenIndex(firstFixedColumn, 1) : null;
         if (firstNonHiddenColumn !== null && lastFixedColumn !== null) {
-            const fixedCell = hotInstance.getCell(firstPartiallyVisibleRow, firstNonHiddenColumn, true);
+            const columnReferenceRow = findColumnReferenceRow(hotInstance, columnReferenceRowStart, columnReferenceRowEnd, firstNonHiddenColumn, lastFixedColumn);
+            const fixedCell = hotInstance.getCell(columnReferenceRow, firstNonHiddenColumn, true);
             if (fixedCell instanceof HTMLElement) {
                 const fixedCellRect = fixedCell.getBoundingClientRect();
                 const fixedRelativeX = isRtl ? fixedCellRect.right - clampedX : clampedX - fixedCellRect.left;
-                foundColumn = findColumnAtX(hotInstance, firstPartiallyVisibleRow, firstNonHiddenColumn, lastFixedColumn, fixedRelativeX);
+                foundColumn = findColumnAtX(hotInstance, columnReferenceRow, firstNonHiddenColumn, lastFixedColumn, fixedRelativeX);
             }
         }
     }
     // If not in fixed columns, check scrollable columns (main table)
     if (foundColumn === null) {
-        const scrollCell = hotInstance.getCell(firstPartiallyVisibleRow, firstPartiallyVisibleColumn, true);
+        const columnReferenceRow = findColumnReferenceRow(hotInstance, columnReferenceRowStart, columnReferenceRowEnd, firstPartiallyVisibleColumn, lastPartiallyVisibleColumn);
+        const scrollCell = hotInstance.getCell(columnReferenceRow, firstPartiallyVisibleColumn, true);
         if (scrollCell instanceof HTMLElement) {
             const scrollCellRect = scrollCell.getBoundingClientRect();
             const scrollRelativeX = isRtl ? scrollCellRect.right - clampedX : clampedX - scrollCellRect.left;
-            foundColumn = findColumnAtX(hotInstance, firstPartiallyVisibleRow, firstPartiallyVisibleColumn, lastPartiallyVisibleColumn, scrollRelativeX);
+            foundColumn = findColumnAtX(hotInstance, columnReferenceRow, firstPartiallyVisibleColumn, lastPartiallyVisibleColumn, scrollRelativeX);
             // Fallback to edge columns if still not found.
             // If `lastPartiallyVisibleColumn` is null (e.g., the HoT is positioned off-screen and
             // viewport queries return invalid indexes), fall back to the global column bounds.
@@ -131,6 +251,21 @@ import { throwWithCause } from '../errors.mjs';
             foundColumn = firstPartiallyVisibleColumn ?? 0;
         }
     }
+    if (foundColumn === null) {
+        throwWithCause('Failed to resolve cell coordinates from mouse position.');
+    }
+    // Resolve the row against a column that has no vertical merge across the rows being walked.
+    // `findRowAtY` skips a merged cell's spanned rows, so measuring against a vertically merged
+    // column collapses every Y inside the band onto the merge anchor. Neither a fixed column nor
+    // the pointer's column is universally safe (a merge can live in either), so each row-scan
+    // branch picks the first column free of vertical merges within its own row range (DEV-2115).
+    const rowReferenceColumnStart = firstPartiallyVisibleColumn ?? 0;
+    // When the viewport query returns null nothing is rendered, so there is no cell to measure
+    // against. Keep the search inside the (empty) rendered range instead of opening it to every
+    // column in the grid — otherwise `findRowReferenceColumn` walks the full column x row product,
+    // calling `getCellMetaTransient` on each step, and a single held autofill/`dragToScroll` drag
+    // on a large off-screen grid locks the tab.
+    const rowReferenceColumnEnd = lastPartiallyVisibleColumn ?? rowReferenceColumnStart;
     let foundRow = null;
     // Check fixed top rows first
     if (numberOfFixedRowsTop > 0) {
@@ -138,11 +273,12 @@ import { throwWithCause } from '../errors.mjs';
         const lastFixedRow = rowIndexMapper.getVisualFromRenderableIndex(numberOfFixedRowsTop - 1);
         const firstNonHiddenRow = firstFixedRow !== null ? rowIndexMapper.getNearestNotHiddenIndex(firstFixedRow, 1) : null;
         if (firstNonHiddenRow !== null && lastFixedRow !== null) {
-            const fixedCell = hotInstance.getCell(firstNonHiddenRow, firstPartiallyVisibleColumn, true);
+            const rowReferenceColumn = findRowReferenceColumn(hotInstance, rowReferenceColumnStart, rowReferenceColumnEnd, firstNonHiddenRow, lastFixedRow);
+            const fixedCell = hotInstance.getCell(firstNonHiddenRow, rowReferenceColumn, true);
             if (fixedCell instanceof HTMLElement) {
                 const fixedCellRect = fixedCell.getBoundingClientRect();
                 const fixedRelativeY = clampedY - fixedCellRect.top;
-                foundRow = findRowAtY(hotInstance, firstPartiallyVisibleColumn, firstNonHiddenRow, lastFixedRow, fixedRelativeY);
+                foundRow = findRowAtY(hotInstance, rowReferenceColumn, firstNonHiddenRow, lastFixedRow, fixedRelativeY);
             }
         }
     }
@@ -154,12 +290,13 @@ import { throwWithCause } from '../errors.mjs';
         const bottomStartNonHiddenRow = bottomStartRow !== null ? rowIndexMapper.getNearestNotHiddenIndex(bottomStartRow, 1) : null;
         const bottomEndNonHiddenRow = bottomEndRow !== null ? rowIndexMapper.getNearestNotHiddenIndex(bottomEndRow, -1) : null;
         if (bottomStartNonHiddenRow !== null && bottomEndNonHiddenRow !== null) {
-            const fixedBottomCell = hotInstance.getCell(bottomStartNonHiddenRow, firstPartiallyVisibleColumn, true);
+            const rowReferenceColumn = findRowReferenceColumn(hotInstance, rowReferenceColumnStart, rowReferenceColumnEnd, bottomStartNonHiddenRow, bottomEndNonHiddenRow);
+            const fixedBottomCell = hotInstance.getCell(bottomStartNonHiddenRow, rowReferenceColumn, true);
             if (fixedBottomCell instanceof HTMLElement) {
                 const fixedBottomCellRect = fixedBottomCell.getBoundingClientRect();
                 const fixedBottomRelativeY = clampedY - fixedBottomCellRect.top;
                 if (fixedBottomRelativeY >= 0) {
-                    foundRow = findRowAtY(hotInstance, firstPartiallyVisibleColumn, bottomStartNonHiddenRow, bottomEndNonHiddenRow, fixedBottomRelativeY);
+                    foundRow = findRowAtY(hotInstance, rowReferenceColumn, bottomStartNonHiddenRow, bottomEndNonHiddenRow, fixedBottomRelativeY);
                     if (foundRow === null) {
                         foundRow = bottomEndNonHiddenRow;
                     }
@@ -169,11 +306,17 @@ import { throwWithCause } from '../errors.mjs';
     }
     // Check scrollable rows (main table)
     if (foundRow === null) {
-        const scrollCell = hotInstance.getCell(firstPartiallyVisibleRow, firstPartiallyVisibleColumn, true);
+        const scrollRowScanStart = firstPartiallyVisibleRow ?? 0;
+        // Same null-viewport guard as the column bound above: clamp the row scan to the (empty)
+        // rendered range rather than `countRows()`, so the reference-column search cannot walk the
+        // whole grid when nothing is rendered.
+        const scrollRowScanEnd = lastPartiallyVisibleRow ?? scrollRowScanStart;
+        const rowReferenceColumn = findRowReferenceColumn(hotInstance, rowReferenceColumnStart, rowReferenceColumnEnd, scrollRowScanStart, scrollRowScanEnd);
+        const scrollCell = hotInstance.getCell(firstPartiallyVisibleRow, rowReferenceColumn, true);
         if (scrollCell instanceof HTMLElement) {
             const scrollCellRect = scrollCell.getBoundingClientRect();
             const scrollRelativeY = clampedY - scrollCellRect.top;
-            foundRow = findRowAtY(hotInstance, firstPartiallyVisibleColumn, firstPartiallyVisibleRow, lastPartiallyVisibleRow, scrollRelativeY);
+            foundRow = findRowAtY(hotInstance, rowReferenceColumn, firstPartiallyVisibleRow, lastPartiallyVisibleRow, scrollRelativeY);
             // Fallback to edge rows if still not found. If the viewport query returns null
             // (off-screen HoT edge case), use the global row bounds.
             if (foundRow === null) {
@@ -183,7 +326,7 @@ import { throwWithCause } from '../errors.mjs';
             foundRow = firstPartiallyVisibleRow ?? 0;
         }
     }
-    if (foundRow === null || foundColumn === null) {
+    if (foundRow === null) {
         throwWithCause('Failed to resolve cell coordinates from mouse position.');
     }
     return hotInstance._createCellCoords(foundRow, foundColumn);

package/helpers/dom/element.d.ts

@@ -447,10 +447,14 @@ export declare function isDetached(element: HTMLElement): boolean;
  * Set up an observer to recognize when the provided element first becomes visible and trigger a callback when it
  * happens.
  *
+ * The observer is returned so the caller can disconnect it earlier - a pending delivery carries the state from
+ * the moment its snapshot was taken, so it can arrive after the observed element (or its owner) is gone.
+ *
  * @param {HTMLElement} elementToBeObserved Element to be observed.
  * @param {Function} callback The callback function.
+ * @returns {IntersectionObserver} The observer watching the element.
  */
-export declare function observeVisibilityChangeOnce(elementToBeObserved: HTMLElement, callback: () => void): void;
+export declare function observeVisibilityChangeOnce(elementToBeObserved: HTMLElement, callback: () => void): IntersectionObserver;
 /**
  * Add a `contenteditable` attribute, select the contents and optionally add the `invisibleSelection`
  * class to the provided element.
@@ -502,10 +506,30 @@ export declare function isHTMLInputElement(element: HTMLElement): element is HTM
 /**
  * Check if the node is a ShadowRoot (a document fragment attached to a host element).
  *
- * @param {Node} node Node to check.
+ * @param {Node|EventTarget} node Node to check.
  * @returns {boolean} `true` if the node is a ShadowRoot.
  */
-export declare function isShadowRoot(node: Node): node is ShadowRoot;
+export declare function isShadowRoot(node: Node | EventTarget): node is ShadowRoot;
+/**
+ * Gets the chain of shadow host elements the node is rendered within, ordered from the
+ * closest host outward to the host attached to the document.
+ *
+ * @param {Node} node The node to read the host chain from.
+ * @returns {HTMLElement[]} The shadow host elements; empty when the node is not in a Shadow DOM tree.
+ */
+export declare function getShadowHostChain(node: Node): HTMLElement[];
+/**
+ * Gets the deepest active (focused) element in the document. When the focus is inside
+ * a Shadow DOM tree, `document.activeElement` points at the shadow host instead of the
+ * focused element. This helper descends through the open shadow roots and returns
+ * the element that actually holds the focus.
+ *
+ * @param {Document} rootDocument The document to read the active element from.
+ * @returns {Element|null} The deepest focused element. The browser reports `document.body`
+ * when no other element holds the focus; `null` appears only in edge cases such as
+ * a document with no body.
+ */
+export declare function getDeepActiveElement(rootDocument: Document): Element | null;
 /**
  * Gets a child node at the specified index cast to the specified HTML element type.
  *

package/helpers/dom/element.js

@@ -54,6 +54,9 @@ _export(exports, {
     get getCssTransform () {
         return getCssTransform;
     },
+    get getDeepActiveElement () {
+        return getDeepActiveElement;
+    },
     get getFractionalScalingCompensation () {
         return getFractionalScalingCompensation;
     },
@@ -90,6 +93,9 @@ _export(exports, {
     get getSelectionText () {
         return getSelectionText;
     },
+    get getShadowHostChain () {
+        return getShadowHostChain;
+    },
     get getStyle () {
         return getStyle;
     },
@@ -674,28 +680,74 @@ function getMaximumScrollTop(element) {
 function getMaximumScrollLeft(element) {
     return element.scrollWidth - element.clientWidth;
 }
+const OVERFLOW_TRIMMING_VALUES = [
+    'scroll',
+    'hidden',
+    'auto',
+    'clip'
+];
+const OVERFLOW_CONCRETE_VALUES = [
+    'visible',
+    'clip',
+    'hidden',
+    'scroll',
+    'auto',
+    'overlay'
+];
+/**
+ * Checks whether a single overflow axis traps the table on that axis.
+ *
+ * `overflow: clip` establishes no scroll port. When an axis is `clip` while the perpendicular axis
+ * stays `visible`, it does not trap the table's scroll — the table still scrolls with the window on
+ * the visible axis. A width-constrained, window-scrolled table sets `overflow-x: clip` on its root
+ * (see core.ts, DEV-1025); treating that root as the trimming container drops the overlays out of
+ * window-scroll mode (frozen rows stop pinning, vertical virtualization stops). Such a single-axis
+ * clip must not qualify the axis as trimming.
+ *
+ * @param {string} axis The `overflow-x`/`overflow-y` value of the axis being tested.
+ * @param {string} perpendicular The `overflow` value of the other axis.
+ * @returns {boolean}
+ */ function overflowAxisTraps(axis, perpendicular) {
+    return OVERFLOW_TRIMMING_VALUES.includes(axis) && !(axis === 'clip' && (perpendicular === 'visible' || perpendicular === ''));
+}
+/**
+ * Resolves the effective `overflow-x`/`overflow-y` of an element, preferring inline styles.
+ *
+ * The inline `overflow` shorthand can carry two values (`overflow: clip visible` → x, y). Some
+ * engines (jsdom) neither split that shorthand into `overflowX`/`overflowY` nor reflect it in the
+ * computed style, so the shorthand string is parsed directly. An inline value is only preferred when
+ * it is a concrete overflow keyword; a global keyword (`inherit`, `initial`, `revert`, `unset`) or
+ * any other non-concrete value falls back to the computed style, which resolves it to the real value
+ * (e.g. an inherited `auto`). Otherwise an inline `inherit` would be read literally and miss the
+ * scroll value it inherits.
+ *
+ * @param {HTMLElement} el The element to read overflow from.
+ * @param {CSSStyleDeclaration} computedStyle The element's computed style.
+ * @returns {{ x: string, y: string }}
+ */ function resolveOverflowAxes(el, computedStyle) {
+    const shorthand = el.style.overflow.split(/\s+/).filter(Boolean);
+    const [shorthandX = '', shorthandY = shorthandX] = shorthand;
+    const resolveAxis = (inlineAxis, shorthandAxis, computedProperty)=>{
+        const inline = inlineAxis || shorthandAxis;
+        return OVERFLOW_CONCRETE_VALUES.includes(inline) ? inline : computedStyle.getPropertyValue(computedProperty);
+    };
+    return {
+        x: resolveAxis(el.style.overflowX, shorthandX, 'overflow-x'),
+        y: resolveAxis(el.style.overflowY, shorthandY, 'overflow-y')
+    };
+}
 function getTrimmingContainer(base) {
     const rootDocument = base.ownerDocument;
     const rootWindow = rootDocument.defaultView;
     let el = base.parentElement;
     while(el && el.style && rootDocument.body !== el){
-        if (el.style.overflow !== 'visible' && el.style.overflow !== '') {
-            return el;
-        }
         if (rootWindow) {
-            const computedStyle = rootWindow.getComputedStyle(el);
-            const allowedProperties = [
-                'scroll',
-                'hidden',
-                'auto',
-                'clip'
-            ];
-            const property = computedStyle.getPropertyValue('overflow');
-            const propertyY = computedStyle.getPropertyValue('overflow-y');
-            const propertyX = computedStyle.getPropertyValue('overflow-x');
-            if (allowedProperties.includes(property) || allowedProperties.includes(propertyY) || allowedProperties.includes(propertyX)) {
+            const { x, y } = resolveOverflowAxes(el, rootWindow.getComputedStyle(el));
+            if (overflowAxisTraps(x, y) || overflowAxisTraps(y, x)) {
                 return el;
             }
+        } else if (el.style.overflow !== 'visible' && el.style.overflow !== '') {
+            return el;
         }
         el = el.parentElement;
     }
@@ -917,7 +969,7 @@ function isOutsideInput(element) {
     return isInput(element) && 'hotInput' in element.dataset === false;
 }
 function selectElementIfAllowed(element) {
-    const activeElement = element.ownerDocument.activeElement;
+    const activeElement = getDeepActiveElement(element.ownerDocument);
     if (isHTMLElement(activeElement) && !isOutsideInput(activeElement) && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)) {
         element.select();
     }
@@ -935,6 +987,7 @@ function observeVisibilityChangeOnce(elementToBeObserved, callback) {
         });
     });
     visibilityObserver.observe(elementToBeObserved);
+    return visibilityObserver;
 }
 function makeElementContentEditableAndSelectItsContent(element, invisibleSelection = true, ariaHidden = true) {
     const ownerDocument = element.ownerDocument;
@@ -982,7 +1035,30 @@ function isHTMLInputElement(element) {
     return element.tagName === 'INPUT';
 }
 function isShadowRoot(node) {
-    return node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
+    if (typeof node !== 'object' || node === null) {
+        return false;
+    }
+    return 'nodeType' in node && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
+}
+function getShadowHostChain(node) {
+    const hosts = [];
+    let rootNode = node.getRootNode();
+    while(isShadowRoot(rootNode)){
+        const { host } = rootNode;
+        if (!isHTMLElement(host)) {
+            break;
+        }
+        hosts.push(host);
+        rootNode = host.getRootNode();
+    }
+    return hosts;
+}
+function getDeepActiveElement(rootDocument) {
+    let element = rootDocument.activeElement;
+    while(element?.shadowRoot?.activeElement){
+        element = element.shadowRoot.activeElement;
+    }
+    return element;
 }
 function getChildEl(parent, index) {
     const node = parent.childNodes[index];

package/helpers/dom/element.mjs

@@ -659,6 +659,62 @@ export function getScrollLeft(element, rootWindow = window) {
  */ export function getMaximumScrollLeft(element) {
     return element.scrollWidth - element.clientWidth;
 }
+const OVERFLOW_TRIMMING_VALUES = [
+    'scroll',
+    'hidden',
+    'auto',
+    'clip'
+];
+const OVERFLOW_CONCRETE_VALUES = [
+    'visible',
+    'clip',
+    'hidden',
+    'scroll',
+    'auto',
+    'overlay'
+];
+/**
+ * Checks whether a single overflow axis traps the table on that axis.
+ *
+ * `overflow: clip` establishes no scroll port. When an axis is `clip` while the perpendicular axis
+ * stays `visible`, it does not trap the table's scroll — the table still scrolls with the window on
+ * the visible axis. A width-constrained, window-scrolled table sets `overflow-x: clip` on its root
+ * (see core.ts, DEV-1025); treating that root as the trimming container drops the overlays out of
+ * window-scroll mode (frozen rows stop pinning, vertical virtualization stops). Such a single-axis
+ * clip must not qualify the axis as trimming.
+ *
+ * @param {string} axis The `overflow-x`/`overflow-y` value of the axis being tested.
+ * @param {string} perpendicular The `overflow` value of the other axis.
+ * @returns {boolean}
+ */ function overflowAxisTraps(axis, perpendicular) {
+    return OVERFLOW_TRIMMING_VALUES.includes(axis) && !(axis === 'clip' && (perpendicular === 'visible' || perpendicular === ''));
+}
+/**
+ * Resolves the effective `overflow-x`/`overflow-y` of an element, preferring inline styles.
+ *
+ * The inline `overflow` shorthand can carry two values (`overflow: clip visible` → x, y). Some
+ * engines (jsdom) neither split that shorthand into `overflowX`/`overflowY` nor reflect it in the
+ * computed style, so the shorthand string is parsed directly. An inline value is only preferred when
+ * it is a concrete overflow keyword; a global keyword (`inherit`, `initial`, `revert`, `unset`) or
+ * any other non-concrete value falls back to the computed style, which resolves it to the real value
+ * (e.g. an inherited `auto`). Otherwise an inline `inherit` would be read literally and miss the
+ * scroll value it inherits.
+ *
+ * @param {HTMLElement} el The element to read overflow from.
+ * @param {CSSStyleDeclaration} computedStyle The element's computed style.
+ * @returns {{ x: string, y: string }}
+ */ function resolveOverflowAxes(el, computedStyle) {
+    const shorthand = el.style.overflow.split(/\s+/).filter(Boolean);
+    const [shorthandX = '', shorthandY = shorthandX] = shorthand;
+    const resolveAxis = (inlineAxis, shorthandAxis, computedProperty)=>{
+        const inline = inlineAxis || shorthandAxis;
+        return OVERFLOW_CONCRETE_VALUES.includes(inline) ? inline : computedStyle.getPropertyValue(computedProperty);
+    };
+    return {
+        x: resolveAxis(el.style.overflowX, shorthandX, 'overflow-x'),
+        y: resolveAxis(el.style.overflowY, shorthandY, 'overflow-y')
+    };
+}
 /**
  * Returns a DOM element responsible for trimming the provided element.
  *
@@ -669,23 +725,13 @@ export function getScrollLeft(element, rootWindow = window) {
     const rootWindow = rootDocument.defaultView;
     let el = base.parentElement;
     while(el && el.style && rootDocument.body !== el){
-        if (el.style.overflow !== 'visible' && el.style.overflow !== '') {
-            return el;
-        }
         if (rootWindow) {
-            const computedStyle = rootWindow.getComputedStyle(el);
-            const allowedProperties = [
-                'scroll',
-                'hidden',
-                'auto',
-                'clip'
-            ];
-            const property = computedStyle.getPropertyValue('overflow');
-            const propertyY = computedStyle.getPropertyValue('overflow-y');
-            const propertyX = computedStyle.getPropertyValue('overflow-x');
-            if (allowedProperties.includes(property) || allowedProperties.includes(propertyY) || allowedProperties.includes(propertyX)) {
+            const { x, y } = resolveOverflowAxes(el, rootWindow.getComputedStyle(el));
+            if (overflowAxisTraps(x, y) || overflowAxisTraps(y, x)) {
                 return el;
             }
+        } else if (el.style.overflow !== 'visible' && el.style.overflow !== '') {
+            return el;
         }
         el = el.parentElement;
     }
@@ -1027,7 +1073,7 @@ export function getScrollbarWidth(rootDocument = document) {
  *
  * @param {HTMLElement} element - DOM element.
  */ export function selectElementIfAllowed(element) {
-    const activeElement = element.ownerDocument.activeElement;
+    const activeElement = getDeepActiveElement(element.ownerDocument);
     if (isHTMLElement(activeElement) && !isOutsideInput(activeElement) && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)) {
         element.select();
     }
@@ -1044,8 +1090,12 @@ export function getScrollbarWidth(rootDocument = document) {
  * Set up an observer to recognize when the provided element first becomes visible and trigger a callback when it
  * happens.
  *
+ * The observer is returned so the caller can disconnect it earlier - a pending delivery carries the state from
+ * the moment its snapshot was taken, so it can arrive after the observed element (or its owner) is gone.
+ *
  * @param {HTMLElement} elementToBeObserved Element to be observed.
  * @param {Function} callback The callback function.
+ * @returns {IntersectionObserver} The observer watching the element.
  */ export function observeVisibilityChangeOnce(elementToBeObserved, callback) {
     const visibilityObserver = new IntersectionObserver((entries, observer)=>{
         entries.forEach((entry)=>{
@@ -1056,6 +1106,7 @@ export function getScrollbarWidth(rootDocument = document) {
         });
     });
     visibilityObserver.observe(elementToBeObserved);
+    return visibilityObserver;
 }
 /**
  * Add a `contenteditable` attribute, select the contents and optionally add the `invisibleSelection`
@@ -1141,10 +1192,49 @@ export function getScrollbarWidth(rootDocument = document) {
 /**
  * Check if the node is a ShadowRoot (a document fragment attached to a host element).
  *
- * @param {Node} node Node to check.
+ * @param {Node|EventTarget} node Node to check.
  * @returns {boolean} `true` if the node is a ShadowRoot.
  */ export function isShadowRoot(node) {
-    return node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
+    if (typeof node !== 'object' || node === null) {
+        return false;
+    }
+    return 'nodeType' in node && node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
+}
+/**
+ * Gets the chain of shadow host elements the node is rendered within, ordered from the
+ * closest host outward to the host attached to the document.
+ *
+ * @param {Node} node The node to read the host chain from.
+ * @returns {HTMLElement[]} The shadow host elements; empty when the node is not in a Shadow DOM tree.
+ */ export function getShadowHostChain(node) {
+    const hosts = [];
+    let rootNode = node.getRootNode();
+    while(isShadowRoot(rootNode)){
+        const { host } = rootNode;
+        if (!isHTMLElement(host)) {
+            break;
+        }
+        hosts.push(host);
+        rootNode = host.getRootNode();
+    }
+    return hosts;
+}
+/**
+ * Gets the deepest active (focused) element in the document. When the focus is inside
+ * a Shadow DOM tree, `document.activeElement` points at the shadow host instead of the
+ * focused element. This helper descends through the open shadow roots and returns
+ * the element that actually holds the focus.
+ *
+ * @param {Document} rootDocument The document to read the active element from.
+ * @returns {Element|null} The deepest focused element. The browser reports `document.body`
+ * when no other element holds the focus; `null` appears only in edge cases such as
+ * a document with no body.
+ */ export function getDeepActiveElement(rootDocument) {
+    let element = rootDocument.activeElement;
+    while(element?.shadowRoot?.activeElement){
+        element = element.shadowRoot.activeElement;
+    }
+    return element;
 }
 /**
  * Gets a child node at the specified index cast to the specified HTML element type.