handsontable 18.0.0 → 18.1.0-rc7

package/plugins/contextMenu/menu/menu.js

@@ -101,11 +101,77 @@ var /**
    *
    * @type {number}
    */ _tableBorderWidth = /*#__PURE__*/ new WeakMap(), /**
+   * Provides the current anchor rectangle for scroll-follow repositioning, or `null`
+   * when the anchor is no longer rendered. Set through `setPosition()`.
+   *
+   * @type {Function|null}
+   */ _anchorRectProvider = /*#__PURE__*/ new WeakMap(), /**
+   * Position baseline captured when the menu is positioned: the offset between the
+   * menu's document coordinates and its anchor (or the grid root when no anchor
+   * provider is available). Used to keep the menu attached while outside elements scroll.
+   *
+   * @type {object|null}
+   */ _scrollFollowBaseline = /*#__PURE__*/ new WeakMap(), /**
+   * When `true`, `afterOnCellMouseOver` ignores the hover instead of opening/closing a
+   * sub-menu. Armed for a couple of animation frames right after `#followAnchor` moves
+   * the menu: repositioning a menu item out from under a stationary mouse cursor makes
+   * the browser recompute `:hover` and fire `mouseout`/`mouseover` on the next frame(s)
+   * with NO real pointer movement involved — left unguarded, that spurious hover would
+   * toggle sub-menus as if the user had moved the mouse (#12719).
+   *
+   * @type {boolean}
+   */ _suppressHoverSubMenuToggle = /*#__PURE__*/ new WeakMap(), /**
+   * The identifier of the latest pending animation frame request that lifts
+   * `#suppressHoverSubMenuToggle`, so a new repositioning can cancel and re-arm the
+   * window instead of having it cut short by an earlier one (continuous scrolling
+   * repositions the menu on every scroll event).
+   *
+   * @type {number|null}
+   */ _suppressHoverSubMenuToggleFrameId = /*#__PURE__*/ new WeakMap(), /**
+   * Detach functions for the document `scroll` listeners active while the menu is open.
+   * Scroll listeners are registered in `open()` (not in the constructor) so that they
+   * fire in menu OPEN order: a menu whose anchor lives inside another menu's container
+   * (a sub-menu, or the filters condition select menu inside the dropdown menu) always
+   * opens after that menu, so its `#followAnchor` runs after the anchor has been moved.
+   * Construction order gives no such guarantee — e.g. `updateSettings` recreates the
+   * dropdown menu while the condition select menu is long-lived (#13168).
+   *
+   * @type {Function[]}
+   */ _detachScrollListeners = /*#__PURE__*/ new WeakMap(), /**
+   * Registers the document `scroll` listeners (capture phase, all parent frames) that
+   * keep the menu attached to its anchor. Called from `open()` — see
+   * `#detachScrollListeners` for why the registration is open-scoped.
+   */ _registerScrollListeners = /*#__PURE__*/ new WeakSet(), /**
+   * Removes the document `scroll` listeners registered by `#registerScrollListeners()`.
+   */ _clearScrollListeners = /*#__PURE__*/ new WeakSet(), /**
    * Returns the source data at the provided row index typed as `T`.
    *
    * @param {number} row Row index.
    * @returns {T | null} The source data entry or `null` when the row is not available.
-   */ _getSourceDataAtRow = /*#__PURE__*/ new WeakSet();
+   */ _getSourceDataAtRow = /*#__PURE__*/ new WeakSet(), /**
+   * Captures the offset between the menu's measured document position and its anchor's
+   * (or the grid root element's, when no anchor provider is set). Both sides are
+   * MEASURED rects — never `style.left/top`, which are not document coordinates when
+   * the menu lives in a custom `uiContainer` with its own containing block. The offset
+   * stays constant while outside elements scroll; repositioning restores it.
+   */ _captureScrollFollowBaseline = /*#__PURE__*/ new WeakSet(), /**
+   * Repositions the menu to restore its captured offset to the anchor. The correction
+   * is computed from MEASURED rects (desired document position minus actual document
+   * position) and applied as an increment to the current inline `left`/`top` styles,
+   * which keeps the math correct in any containing block (default body portal or a
+   * custom `uiContainer`) and makes scrolls the menu already follows natively a no-op.
+   * Closes the menu when the anchor provider reports the anchor as no longer rendered,
+   * or — when no provider is available — when the scroll happened inside the grid root
+   * element (an anchor-less menu cannot track content movement within the grid).
+   *
+   * @param {HTMLElement} scrolledElement The element whose scroll triggered the update.
+   */ _followAnchor = /*#__PURE__*/ new WeakSet(), /**
+   * Arms `#suppressHoverSubMenuToggle` for two animation frames. The browser recomputes
+   * `:hover` (and dispatches the resulting `mouseout`/`mouseover`) on a frame AFTER the
+   * layout-affecting style change that just moved menu content out from under the
+   * pointer, not synchronously with it — one frame is not reliably enough to outlast it.
+   * Re-arming cancels a still-pending lift so continuous scrolling keeps the window open.
+   */ _armHoverSuppression = /*#__PURE__*/ new WeakSet();
 class Menu {
     /**
    * Getter for the table border width.
@@ -213,6 +279,10 @@ class Menu {
         } else if (filteredItems.length === 0) {
             return;
         }
+        // Registered per-open (and after the empty-items early return, which would leak
+        // them) so that scroll listeners fire in menu open order — a menu anchored inside
+        // another menu then always repositions AFTER its anchor was moved.
+        _class_private_method_get(this, _registerScrollListeners, registerScrollListeners).call(this);
         filteredItems = (0, _utils.filterSeparators)(filteredItems);
         let shouldAutoCloseMenu = false;
         const settings = {
@@ -251,9 +321,23 @@ class Menu {
             },
             beforeRefreshDimensions: ()=>false,
             beforeOnCellMouseOver: (event, coords)=>{
+                // See the matching guard in `afterOnCellMouseOver` below — keeps the keyboard
+                // (PageUp/PageDown) page-cursor base row from silently drifting to whatever row
+                // the spurious hover lands on.
+                if (_class_private_field_get(this, _suppressHoverSubMenuToggle)) {
+                    return;
+                }
                 _class_private_field_get(this, _navigator1).setPageCursorAt(coords.row);
             },
             afterOnCellMouseOver: (event, coords)=>{
+                // Dropped, not deferred: a genuine hover that lands on a new row while this
+                // window is armed gets no submenu toggle at all — the user has to cross another
+                // row boundary (a fresh `mouseover`) for the hover to register. Rare in practice
+                // (the window is 2 frames) and preferable to replaying a possibly-stale coords.row
+                // once the window closes.
+                if (_class_private_field_get(this, _suppressHoverSubMenuToggle)) {
+                    return;
+                }
                 if (this.isAllSubMenusClosed()) {
                     delayedOpenSubMenu(coords.row);
                 } else {
@@ -336,6 +420,14 @@ class Menu {
             this.container.style.display = 'none';
             this.hotMenu.destroy();
             this.hotMenu = null;
+            _class_private_field_set(this, _anchorRectProvider, null);
+            _class_private_field_set(this, _scrollFollowBaseline, null);
+            _class_private_method_get(this, _clearScrollListeners, clearScrollListeners).call(this);
+            if (_class_private_field_get(this, _suppressHoverSubMenuToggleFrameId) !== null) {
+                this.hot.rootWindow.cancelAnimationFrame(_class_private_field_get(this, _suppressHoverSubMenuToggleFrameId));
+                _class_private_field_set(this, _suppressHoverSubMenuToggleFrameId, null);
+            }
+            _class_private_field_set(this, _suppressHoverSubMenuToggle, false);
             this.hot.getSettings().outsideClickDeselects = this.origOutsideClickDeselects;
             this.runLocalHooks('afterClose');
             if (this.isSubMenu()) {
@@ -378,7 +470,7 @@ class Menu {
         });
         subMenu.setMenuItems(dataItem.submenu.items);
         subMenu.open();
-        subMenu.setPosition(cell.getBoundingClientRect());
+        subMenu.setPosition(cell.getBoundingClientRect(), ()=>cell.isConnected ? cell.getBoundingClientRect() : null);
         this.hotSubMenus[dataItem.key] = subMenu;
         // Update the accessibility tags on the cell being the base for the submenu.
         if (this.hot.getSettings().ariaTags) {
@@ -496,11 +588,15 @@ class Menu {
    * Set menu position based on dom event or based on literal object.
    *
    * @param {Event|object} coords Event or literal Object with coordinates.
-   */ setPosition(coords) {
+   * @param {Function} [anchorRectProvider] Returns the current anchor rectangle for
+   * scroll-follow repositioning, or `null` when the anchor is no longer rendered.
+   */ setPosition(coords, anchorRectProvider) {
         if (this.isSubMenu()) {
             this.positioner.setParentElement(this.parentMenu.container);
         }
         this.positioner.setElement(this.container).updatePosition(coords);
+        _class_private_field_set(this, _anchorRectProvider, anchorRectProvider ?? null);
+        _class_private_method_get(this, _captureScrollFollowBaseline, captureScrollFollowBaseline).call(this);
     }
     /**
    * Updates the dimensions of the menu based on its content.
@@ -580,6 +676,27 @@ class Menu {
         }
     }
     /**
+   * Document's scroll listener (capture phase). When an element outside of the menu
+   * is scrolled, repositions the menu so it stays visually attached to its anchor
+   * (column header, cell, or parent menu item) — the menu is rendered in a portal
+   * positioned in document coordinates, so it would otherwise stay stranded (#12719).
+   * Closes the menu when the anchor is scrolled out of the rendered viewport.
+   * Ignored: page/document scroll (document coordinates already track it), scrolls
+   * within the menu, and scrolls of elements that contain the menu (custom
+   * `uiContainer` — the menu moves natively with its container).
+   *
+   * @private
+   * @param {Event} event The scroll event object.
+   */ onDocumentScroll(event) {
+        if (!this.isOpened() || _class_private_field_get(this, _scrollFollowBaseline) === null) {
+            return;
+        }
+        if (!(0, _element.isHTMLElement)(event.target) || (0, _element.isChildOf)(event.target, '.htMenu')) {
+            return;
+        }
+        _class_private_method_get(this, _followAnchor, followAnchor).call(this, event.target);
+    }
+    /**
    * Document's contextmenu listener.
    *
    * @private
@@ -596,7 +713,12 @@ class Menu {
    * @param {Core} hotInstance Handsontable instance.
    * @param {MenuOptions} [options] Menu options.
    */ constructor(hotInstance, options){
+        _class_private_method_init(this, _registerScrollListeners);
+        _class_private_method_init(this, _clearScrollListeners);
         _class_private_method_init(this, _getSourceDataAtRow);
+        _class_private_method_init(this, _captureScrollFollowBaseline);
+        _class_private_method_init(this, _followAnchor);
+        _class_private_method_init(this, _armHoverSuppression);
         _class_private_field_init(this, _navigator1, {
             writable: true,
             value: void 0
@@ -609,6 +731,26 @@ class Menu {
             writable: true,
             value: void 0
         });
+        _class_private_field_init(this, _anchorRectProvider, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _scrollFollowBaseline, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _suppressHoverSubMenuToggle, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _suppressHoverSubMenuToggleFrameId, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _detachScrollListeners, {
+            writable: true,
+            value: void 0
+        });
         /**
    * The instance of the Handsontable that is used as a menu.
    *
@@ -629,6 +771,11 @@ class Menu {
    */ this.origOutsideClickDeselects = undefined;
         _class_private_field_set(this, _navigator1, null);
         _class_private_field_set(this, _shortcutsCtrl, null);
+        _class_private_field_set(this, _anchorRectProvider, null);
+        _class_private_field_set(this, _scrollFollowBaseline, null);
+        _class_private_field_set(this, _suppressHoverSubMenuToggle, false);
+        _class_private_field_set(this, _suppressHoverSubMenuToggleFrameId, null);
+        _class_private_field_set(this, _detachScrollListeners, []);
         this.hot = hotInstance;
         this.options = {
             parent: null,
@@ -660,8 +807,69 @@ class Menu {
         });
     }
 }
+function registerScrollListeners() {
+    _class_private_method_get(this, _clearScrollListeners, clearScrollListeners).call(this);
+    let frame = this.hot.rootWindow;
+    while(frame){
+        _class_private_field_get(this, _detachScrollListeners).push(this.eventManager.addEventListener(frame.document, 'scroll', (event)=>this.onDocumentScroll(event), {
+            capture: true,
+            passive: true
+        }));
+        frame = (0, _element.getParentWindow)(frame);
+    }
+}
+function clearScrollListeners() {
+    _class_private_field_get(this, _detachScrollListeners).forEach((detach)=>detach());
+    _class_private_field_get(this, _detachScrollListeners).length = 0;
+}
 function getSourceDataAtRow(row) {
     const data = this.hotMenu?.getSourceDataAtRow(row);
     return data ? data : null;
 }
+function captureScrollFollowBaseline() {
+    var _this, _this1, _ref;
+    const menuRect = this.container.getBoundingClientRect();
+    const anchorRect = ((_this = _class_private_field_get(_ref = _this1 = this, _anchorRectProvider)) === null || _this === void 0 ? void 0 : _this.call(_this1)) ?? this.hot.rootElement.getBoundingClientRect();
+    _class_private_field_set(this, _scrollFollowBaseline, {
+        offsetLeft: menuRect.left - anchorRect.left,
+        offsetTop: menuRect.top - anchorRect.top
+    });
+}
+function followAnchor(scrolledElement) {
+    let anchorRect;
+    if (_class_private_field_get(this, _anchorRectProvider)) {
+        anchorRect = _class_private_field_get(this, _anchorRectProvider).call(this);
+    } else if (scrolledElement === this.hot.rootElement || (0, _element.isChildOf)(scrolledElement, this.hot.rootElement)) {
+        this.close(true);
+        return;
+    } else {
+        anchorRect = this.hot.rootElement.getBoundingClientRect();
+    }
+    if (anchorRect === null) {
+        this.close(true);
+        return;
+    }
+    const { offsetLeft, offsetTop } = _class_private_field_get(this, _scrollFollowBaseline);
+    const menuRect = this.container.getBoundingClientRect();
+    const correctionLeft = anchorRect.left + offsetLeft - menuRect.left;
+    const correctionTop = anchorRect.top + offsetTop - menuRect.top;
+    if (correctionLeft === 0 && correctionTop === 0) {
+        return;
+    }
+    this.container.style.left = `${(Number.parseFloat(this.container.style.left) || 0) + correctionLeft}px`;
+    this.container.style.top = `${(Number.parseFloat(this.container.style.top) || 0) + correctionTop}px`;
+    _class_private_method_get(this, _armHoverSuppression, armHoverSuppression).call(this);
+}
+function armHoverSuppression() {
+    _class_private_field_set(this, _suppressHoverSubMenuToggle, true);
+    if (_class_private_field_get(this, _suppressHoverSubMenuToggleFrameId) !== null) {
+        this.hot.rootWindow.cancelAnimationFrame(_class_private_field_get(this, _suppressHoverSubMenuToggleFrameId));
+    }
+    _class_private_field_set(this, _suppressHoverSubMenuToggleFrameId, this.hot.rootWindow.requestAnimationFrame(()=>{
+        _class_private_field_set(this, _suppressHoverSubMenuToggleFrameId, this.hot.rootWindow.requestAnimationFrame(()=>{
+            _class_private_field_set(this, _suppressHoverSubMenuToggle, false);
+            _class_private_field_set(this, _suppressHoverSubMenuToggleFrameId, null);
+        }));
+    }));
+}
 (0, _object.mixin)(Menu, _localHooks.default);

package/plugins/contextMenu/menu/menu.mjs

@@ -56,7 +56,7 @@ import { filterSeparators, hasSubMenu, isItemHidden, normalizeSelection, isItemS
 import EventManager from '../../../eventManager.mjs';
 import { arrayEach, arrayFilter, arrayReduce } from '../../../helpers/array.mjs';
 import { isWindowsOS, isMobileBrowser, isIpadOS } from '../../../helpers/browser.mjs';
-import { addClass, eventTargetEl, isChildOf, getParentWindow, hasClass, setAttribute, outerHeight, removeClass } from '../../../helpers/dom/element.mjs';
+import { addClass, eventTargetEl, isChildOf, isHTMLElement, getParentWindow, hasClass, setAttribute, outerHeight, removeClass } from '../../../helpers/dom/element.mjs';
 import { isRightClick } from '../../../helpers/dom/event.mjs';
 import { debounce } from '../../../helpers/function.mjs';
 import { isDefined } from '../../../helpers/mixed.mjs';
@@ -86,11 +86,77 @@ var /**
    *
    * @type {number}
    */ _tableBorderWidth = /*#__PURE__*/ new WeakMap(), /**
+   * Provides the current anchor rectangle for scroll-follow repositioning, or `null`
+   * when the anchor is no longer rendered. Set through `setPosition()`.
+   *
+   * @type {Function|null}
+   */ _anchorRectProvider = /*#__PURE__*/ new WeakMap(), /**
+   * Position baseline captured when the menu is positioned: the offset between the
+   * menu's document coordinates and its anchor (or the grid root when no anchor
+   * provider is available). Used to keep the menu attached while outside elements scroll.
+   *
+   * @type {object|null}
+   */ _scrollFollowBaseline = /*#__PURE__*/ new WeakMap(), /**
+   * When `true`, `afterOnCellMouseOver` ignores the hover instead of opening/closing a
+   * sub-menu. Armed for a couple of animation frames right after `#followAnchor` moves
+   * the menu: repositioning a menu item out from under a stationary mouse cursor makes
+   * the browser recompute `:hover` and fire `mouseout`/`mouseover` on the next frame(s)
+   * with NO real pointer movement involved — left unguarded, that spurious hover would
+   * toggle sub-menus as if the user had moved the mouse (#12719).
+   *
+   * @type {boolean}
+   */ _suppressHoverSubMenuToggle = /*#__PURE__*/ new WeakMap(), /**
+   * The identifier of the latest pending animation frame request that lifts
+   * `#suppressHoverSubMenuToggle`, so a new repositioning can cancel and re-arm the
+   * window instead of having it cut short by an earlier one (continuous scrolling
+   * repositions the menu on every scroll event).
+   *
+   * @type {number|null}
+   */ _suppressHoverSubMenuToggleFrameId = /*#__PURE__*/ new WeakMap(), /**
+   * Detach functions for the document `scroll` listeners active while the menu is open.
+   * Scroll listeners are registered in `open()` (not in the constructor) so that they
+   * fire in menu OPEN order: a menu whose anchor lives inside another menu's container
+   * (a sub-menu, or the filters condition select menu inside the dropdown menu) always
+   * opens after that menu, so its `#followAnchor` runs after the anchor has been moved.
+   * Construction order gives no such guarantee — e.g. `updateSettings` recreates the
+   * dropdown menu while the condition select menu is long-lived (#13168).
+   *
+   * @type {Function[]}
+   */ _detachScrollListeners = /*#__PURE__*/ new WeakMap(), /**
+   * Registers the document `scroll` listeners (capture phase, all parent frames) that
+   * keep the menu attached to its anchor. Called from `open()` — see
+   * `#detachScrollListeners` for why the registration is open-scoped.
+   */ _registerScrollListeners = /*#__PURE__*/ new WeakSet(), /**
+   * Removes the document `scroll` listeners registered by `#registerScrollListeners()`.
+   */ _clearScrollListeners = /*#__PURE__*/ new WeakSet(), /**
    * Returns the source data at the provided row index typed as `T`.
    *
    * @param {number} row Row index.
    * @returns {T | null} The source data entry or `null` when the row is not available.
-   */ _getSourceDataAtRow = /*#__PURE__*/ new WeakSet();
+   */ _getSourceDataAtRow = /*#__PURE__*/ new WeakSet(), /**
+   * Captures the offset between the menu's measured document position and its anchor's
+   * (or the grid root element's, when no anchor provider is set). Both sides are
+   * MEASURED rects — never `style.left/top`, which are not document coordinates when
+   * the menu lives in a custom `uiContainer` with its own containing block. The offset
+   * stays constant while outside elements scroll; repositioning restores it.
+   */ _captureScrollFollowBaseline = /*#__PURE__*/ new WeakSet(), /**
+   * Repositions the menu to restore its captured offset to the anchor. The correction
+   * is computed from MEASURED rects (desired document position minus actual document
+   * position) and applied as an increment to the current inline `left`/`top` styles,
+   * which keeps the math correct in any containing block (default body portal or a
+   * custom `uiContainer`) and makes scrolls the menu already follows natively a no-op.
+   * Closes the menu when the anchor provider reports the anchor as no longer rendered,
+   * or — when no provider is available — when the scroll happened inside the grid root
+   * element (an anchor-less menu cannot track content movement within the grid).
+   *
+   * @param {HTMLElement} scrolledElement The element whose scroll triggered the update.
+   */ _followAnchor = /*#__PURE__*/ new WeakSet(), /**
+   * Arms `#suppressHoverSubMenuToggle` for two animation frames. The browser recomputes
+   * `:hover` (and dispatches the resulting `mouseout`/`mouseover`) on a frame AFTER the
+   * layout-affecting style change that just moved menu content out from under the
+   * pointer, not synchronously with it — one frame is not reliably enough to outlast it.
+   * Re-arming cancels a still-pending lift so continuous scrolling keeps the window open.
+   */ _armHoverSuppression = /*#__PURE__*/ new WeakSet();
 /**
  * @typedef MenuOptions
  * @property {Menu} [parent=null] Instance of {@link Menu}.
@@ -210,6 +276,10 @@ var /**
         } else if (filteredItems.length === 0) {
             return;
         }
+        // Registered per-open (and after the empty-items early return, which would leak
+        // them) so that scroll listeners fire in menu open order — a menu anchored inside
+        // another menu then always repositions AFTER its anchor was moved.
+        _class_private_method_get(this, _registerScrollListeners, registerScrollListeners).call(this);
         filteredItems = filterSeparators(filteredItems);
         let shouldAutoCloseMenu = false;
         const settings = {
@@ -248,9 +318,23 @@ var /**
             },
             beforeRefreshDimensions: ()=>false,
             beforeOnCellMouseOver: (event, coords)=>{
+                // See the matching guard in `afterOnCellMouseOver` below — keeps the keyboard
+                // (PageUp/PageDown) page-cursor base row from silently drifting to whatever row
+                // the spurious hover lands on.
+                if (_class_private_field_get(this, _suppressHoverSubMenuToggle)) {
+                    return;
+                }
                 _class_private_field_get(this, _navigator).setPageCursorAt(coords.row);
             },
             afterOnCellMouseOver: (event, coords)=>{
+                // Dropped, not deferred: a genuine hover that lands on a new row while this
+                // window is armed gets no submenu toggle at all — the user has to cross another
+                // row boundary (a fresh `mouseover`) for the hover to register. Rare in practice
+                // (the window is 2 frames) and preferable to replaying a possibly-stale coords.row
+                // once the window closes.
+                if (_class_private_field_get(this, _suppressHoverSubMenuToggle)) {
+                    return;
+                }
                 if (this.isAllSubMenusClosed()) {
                     delayedOpenSubMenu(coords.row);
                 } else {
@@ -333,6 +417,14 @@ var /**
             this.container.style.display = 'none';
             this.hotMenu.destroy();
             this.hotMenu = null;
+            _class_private_field_set(this, _anchorRectProvider, null);
+            _class_private_field_set(this, _scrollFollowBaseline, null);
+            _class_private_method_get(this, _clearScrollListeners, clearScrollListeners).call(this);
+            if (_class_private_field_get(this, _suppressHoverSubMenuToggleFrameId) !== null) {
+                this.hot.rootWindow.cancelAnimationFrame(_class_private_field_get(this, _suppressHoverSubMenuToggleFrameId));
+                _class_private_field_set(this, _suppressHoverSubMenuToggleFrameId, null);
+            }
+            _class_private_field_set(this, _suppressHoverSubMenuToggle, false);
             this.hot.getSettings().outsideClickDeselects = this.origOutsideClickDeselects;
             this.runLocalHooks('afterClose');
             if (this.isSubMenu()) {
@@ -375,7 +467,7 @@ var /**
         });
         subMenu.setMenuItems(dataItem.submenu.items);
         subMenu.open();
-        subMenu.setPosition(cell.getBoundingClientRect());
+        subMenu.setPosition(cell.getBoundingClientRect(), ()=>cell.isConnected ? cell.getBoundingClientRect() : null);
         this.hotSubMenus[dataItem.key] = subMenu;
         // Update the accessibility tags on the cell being the base for the submenu.
         if (this.hot.getSettings().ariaTags) {
@@ -493,11 +585,15 @@ var /**
    * Set menu position based on dom event or based on literal object.
    *
    * @param {Event|object} coords Event or literal Object with coordinates.
-   */ setPosition(coords) {
+   * @param {Function} [anchorRectProvider] Returns the current anchor rectangle for
+   * scroll-follow repositioning, or `null` when the anchor is no longer rendered.
+   */ setPosition(coords, anchorRectProvider) {
         if (this.isSubMenu()) {
             this.positioner.setParentElement(this.parentMenu.container);
         }
         this.positioner.setElement(this.container).updatePosition(coords);
+        _class_private_field_set(this, _anchorRectProvider, anchorRectProvider ?? null);
+        _class_private_method_get(this, _captureScrollFollowBaseline, captureScrollFollowBaseline).call(this);
     }
     /**
    * Updates the dimensions of the menu based on its content.
@@ -577,6 +673,27 @@ var /**
         }
     }
     /**
+   * Document's scroll listener (capture phase). When an element outside of the menu
+   * is scrolled, repositions the menu so it stays visually attached to its anchor
+   * (column header, cell, or parent menu item) — the menu is rendered in a portal
+   * positioned in document coordinates, so it would otherwise stay stranded (#12719).
+   * Closes the menu when the anchor is scrolled out of the rendered viewport.
+   * Ignored: page/document scroll (document coordinates already track it), scrolls
+   * within the menu, and scrolls of elements that contain the menu (custom
+   * `uiContainer` — the menu moves natively with its container).
+   *
+   * @private
+   * @param {Event} event The scroll event object.
+   */ onDocumentScroll(event) {
+        if (!this.isOpened() || _class_private_field_get(this, _scrollFollowBaseline) === null) {
+            return;
+        }
+        if (!isHTMLElement(event.target) || isChildOf(event.target, '.htMenu')) {
+            return;
+        }
+        _class_private_method_get(this, _followAnchor, followAnchor).call(this, event.target);
+    }
+    /**
    * Document's contextmenu listener.
    *
    * @private
@@ -593,7 +710,12 @@ var /**
    * @param {Core} hotInstance Handsontable instance.
    * @param {MenuOptions} [options] Menu options.
    */ constructor(hotInstance, options){
+        _class_private_method_init(this, _registerScrollListeners);
+        _class_private_method_init(this, _clearScrollListeners);
         _class_private_method_init(this, _getSourceDataAtRow);
+        _class_private_method_init(this, _captureScrollFollowBaseline);
+        _class_private_method_init(this, _followAnchor);
+        _class_private_method_init(this, _armHoverSuppression);
         _class_private_field_init(this, _navigator, {
             writable: true,
             value: void 0
@@ -606,6 +728,26 @@ var /**
             writable: true,
             value: void 0
         });
+        _class_private_field_init(this, _anchorRectProvider, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _scrollFollowBaseline, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _suppressHoverSubMenuToggle, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _suppressHoverSubMenuToggleFrameId, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _detachScrollListeners, {
+            writable: true,
+            value: void 0
+        });
         /**
    * The instance of the Handsontable that is used as a menu.
    *
@@ -626,6 +768,11 @@ var /**
    */ this.origOutsideClickDeselects = undefined;
         _class_private_field_set(this, _navigator, null);
         _class_private_field_set(this, _shortcutsCtrl, null);
+        _class_private_field_set(this, _anchorRectProvider, null);
+        _class_private_field_set(this, _scrollFollowBaseline, null);
+        _class_private_field_set(this, _suppressHoverSubMenuToggle, false);
+        _class_private_field_set(this, _suppressHoverSubMenuToggleFrameId, null);
+        _class_private_field_set(this, _detachScrollListeners, []);
         this.hot = hotInstance;
         this.options = {
             parent: null,
@@ -657,8 +804,69 @@ var /**
         });
     }
 }
+function registerScrollListeners() {
+    _class_private_method_get(this, _clearScrollListeners, clearScrollListeners).call(this);
+    let frame = this.hot.rootWindow;
+    while(frame){
+        _class_private_field_get(this, _detachScrollListeners).push(this.eventManager.addEventListener(frame.document, 'scroll', (event)=>this.onDocumentScroll(event), {
+            capture: true,
+            passive: true
+        }));
+        frame = getParentWindow(frame);
+    }
+}
+function clearScrollListeners() {
+    _class_private_field_get(this, _detachScrollListeners).forEach((detach)=>detach());
+    _class_private_field_get(this, _detachScrollListeners).length = 0;
+}
 function getSourceDataAtRow(row) {
     const data = this.hotMenu?.getSourceDataAtRow(row);
     return data ? data : null;
 }
+function captureScrollFollowBaseline() {
+    var _this, _this1, _ref;
+    const menuRect = this.container.getBoundingClientRect();
+    const anchorRect = ((_this = _class_private_field_get(_ref = _this1 = this, _anchorRectProvider)) === null || _this === void 0 ? void 0 : _this.call(_this1)) ?? this.hot.rootElement.getBoundingClientRect();
+    _class_private_field_set(this, _scrollFollowBaseline, {
+        offsetLeft: menuRect.left - anchorRect.left,
+        offsetTop: menuRect.top - anchorRect.top
+    });
+}
+function followAnchor(scrolledElement) {
+    let anchorRect;
+    if (_class_private_field_get(this, _anchorRectProvider)) {
+        anchorRect = _class_private_field_get(this, _anchorRectProvider).call(this);
+    } else if (scrolledElement === this.hot.rootElement || isChildOf(scrolledElement, this.hot.rootElement)) {
+        this.close(true);
+        return;
+    } else {
+        anchorRect = this.hot.rootElement.getBoundingClientRect();
+    }
+    if (anchorRect === null) {
+        this.close(true);
+        return;
+    }
+    const { offsetLeft, offsetTop } = _class_private_field_get(this, _scrollFollowBaseline);
+    const menuRect = this.container.getBoundingClientRect();
+    const correctionLeft = anchorRect.left + offsetLeft - menuRect.left;
+    const correctionTop = anchorRect.top + offsetTop - menuRect.top;
+    if (correctionLeft === 0 && correctionTop === 0) {
+        return;
+    }
+    this.container.style.left = `${(Number.parseFloat(this.container.style.left) || 0) + correctionLeft}px`;
+    this.container.style.top = `${(Number.parseFloat(this.container.style.top) || 0) + correctionTop}px`;
+    _class_private_method_get(this, _armHoverSuppression, armHoverSuppression).call(this);
+}
+function armHoverSuppression() {
+    _class_private_field_set(this, _suppressHoverSubMenuToggle, true);
+    if (_class_private_field_get(this, _suppressHoverSubMenuToggleFrameId) !== null) {
+        this.hot.rootWindow.cancelAnimationFrame(_class_private_field_get(this, _suppressHoverSubMenuToggleFrameId));
+    }
+    _class_private_field_set(this, _suppressHoverSubMenuToggleFrameId, this.hot.rootWindow.requestAnimationFrame(()=>{
+        _class_private_field_set(this, _suppressHoverSubMenuToggleFrameId, this.hot.rootWindow.requestAnimationFrame(()=>{
+            _class_private_field_set(this, _suppressHoverSubMenuToggle, false);
+            _class_private_field_set(this, _suppressHoverSubMenuToggleFrameId, null);
+        }));
+    }));
+}
 mixin(Menu, localHooks);

package/plugins/contextMenu/menu/menuItemRenderer.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "createMenuItemRenderer", {
 const _utils = require("./utils");
 const _element = require("../../../helpers/dom/element");
 const _a11y = require("../../../helpers/a11y");
+const _sanitizer = require("../../../utils/sanitizer");
 function createMenuItemRenderer(mainTableHot) {
     /**
    * Menu item renderer.
@@ -62,9 +63,8 @@ function createMenuItemRenderer(mainTableHot) {
             (0, _element.addClass)(TD, 'htCustomMenuRenderer');
             TD.appendChild(item.renderer(menuHot, wrapper, row, col, prop, itemValue));
         } else {
-            const sanitizer = mainTableHot.getSettings().sanitizer;
             const itemStr = String(itemValue);
-            (0, _element.fastInnerHTML)(wrapper, itemStr, sanitizer, 'contextMenu', mainTableHot.rootElement);
+            (0, _element.fastInnerHTML)(wrapper, itemStr, (0, _sanitizer.getSanitizer)(mainTableHot), 'contextMenu', mainTableHot.rootElement);
         }
         if ((0, _utils.isItemDisabled)(item, mainTableHot)) {
             (0, _element.addClass)(TD, 'htDisabled');

package/plugins/contextMenu/menu/menuItemRenderer.mjs

@@ -1,6 +1,7 @@
 import { isItemSubMenu, isItemDisabled, isItemSelectionDisabled, isItemSeparator, isItemCheckable } from './utils.mjs';
 import { addClass, empty, fastInnerHTML, setAttribute } from '../../../helpers/dom/element.mjs';
 import { A11Y_MENU_ITEM_CHECKBOX, A11Y_DISABLED, A11Y_EXPANDED, A11Y_LABEL, A11Y_MENU_ITEM, A11Y_TABINDEX, A11Y_CHECKED } from '../../../helpers/a11y.mjs';
+import { getSanitizer } from '../../../utils/sanitizer.mjs';
 /**
  * Creates the menu renderer function.
  *
@@ -58,9 +59,8 @@ import { A11Y_MENU_ITEM_CHECKBOX, A11Y_DISABLED, A11Y_EXPANDED, A11Y_LABEL, A11Y
             addClass(TD, 'htCustomMenuRenderer');
             TD.appendChild(item.renderer(menuHot, wrapper, row, col, prop, itemValue));
         } else {
-            const sanitizer = mainTableHot.getSettings().sanitizer;
             const itemStr = String(itemValue);
-            fastInnerHTML(wrapper, itemStr, sanitizer, 'contextMenu', mainTableHot.rootElement);
+            fastInnerHTML(wrapper, itemStr, getSanitizer(mainTableHot), 'contextMenu', mainTableHot.rootElement);
         }
         if (isItemDisabled(item, mainTableHot)) {
             addClass(TD, 'htDisabled');