ContextMenu: fix max height calculation (#30249)

Author: aleksei-semikozov

packages/devextreme/js/__internal/ui/context_menu/m_context_menu.ts

@@ -720,6 +720,11 @@ class ContextMenu extends MenuBase {
     $submenu.css('height', isNestedSubmenu ? menuHeight : '100%');
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  _getMaxUsableSpace(offsetTop: number, windowHeight: number, anchorHeight: number): number {
+    return windowHeight;
+  }
+
   _getMaxHeight(anchor, considerAnchorHeight = true) {
     const windowHeight = getOuterHeight(window);
     const isAnchorRenderer = isRenderer(anchor);
@@ -733,7 +738,7 @@ class ContextMenu extends MenuBase {
     const offsetTop = anchor[0].getBoundingClientRect().top;
     const anchorHeight = getOuterHeight(anchor);
     const availableHeight = considerAnchorHeight
-      ? Math.max(offsetTop, windowHeight - offsetTop - anchorHeight)
+      ? this._getMaxUsableSpace(offsetTop, windowHeight, anchorHeight)
       : Math.max(offsetTop + anchorHeight, windowHeight - offsetTop);
 
     return availableHeight - SUBMENU_PADDING;

packages/devextreme/js/__internal/ui/menu/m_submenu.ts

@@ -24,6 +24,10 @@ class Submenu extends ContextMenu {
 
   _dataAdapter: any;
 
+  _getMaxUsableSpace(offsetTop: number, windowHeight: number, anchorHeight: number): number {
+    return Math.max(offsetTop, windowHeight - offsetTop - anchorHeight);
+  }
+
   _getDefaultOptions() {
     return extend(super._getDefaultOptions(), {
       orientation: 'horizontal',

packages/devextreme/testing/tests/DevExpress.ui.widgets/contextMenu.tests.js

@@ -769,6 +769,33 @@ QUnit.module('Rendering Scrollable', moduleConfig, () => {
                 'expanded item still visible'
             );
         });
+
+        QUnit.test('Context menu height should fit viewport minus borders and padding', function(assert) {
+            new ContextMenu(this.$element, {
+                target: $('#menuTarget'),
+                items: Array.from({ length: 1000 }, (_, i) => ({
+                    text: `item ${i + 1}`,
+                })),
+                visible: false,
+                position: {
+                    at: 'bottom center',
+                    my: 'top center',
+                    of: $('#menuShower'),
+                },
+            });
+
+            $('#menuTarget').trigger('dxcontextmenu');
+
+            const $itemsContainer = $('.dx-scrollable-container');
+
+            assert.roughEqual(
+                $itemsContainer.height(),
+                $(window).height() - 2 * BORDER_WIDTH - SUBMENU_PADDING,
+                1,
+                'height window vs container',
+            );
+        });
+
     });
 });