[data grid] Column Menu Positioning in MUI DataGridPremium

[Iuli1478]

Continuing from this bug: #15121

Steps to reproduce

Open a DataGridPremium with several columns.
Scroll the grid to a point where one of the column headers is near the bottom of the viewport.
Make sure the grid is displayed in a viewport where there isn’t enough space either above or below for the menu to fully open.
Click the column menu button (three dots) to open the menu.
Notice that the menu extends below the screen and is not fully visible.
Try scrolling the page; the menu will close automatically.

Current behavior

The menu extends below the screen when it doesn’t fit in the available space, causing some options to be inaccessible. Attempting to scroll the page to reach those hidden options causes the menu to close, making it impossible to select those menu items.

Expected behavior

The column menu should automatically reposition itself to fit within the visible viewport. For example, it could:
Open upwards if there's not enough space below.
Introduce an internal scroll for the menu itself if there isn’t enough space either above or below.

Context

Мenu currently behaves correctly when there is enough space. It positions itself either above or below the grid as expected. However, in our specific case, the menu does not fit either above or below the screen. In such a situation, I would expect the menu to:

Appear centered within the available viewport space or
Provide a vertical scroll to access all the options.
This is a real-world scenario for us, and I hope we can find a fix or a workaround to handle this case effectively.

Your environment

System: OS: Windows 10 64-bit CPU: Intel Core i7-9700K Memory: 16 GB RAM

Binaries: Node: 16.14.0 - C:\Program Files\nodejs\node.EXE npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD

Browsers: Chrome: 117.0.5938.132 Firefox: 118.0 Edge: 117.0.2045.60

npmPackages: @mui/material: ^5.14.1 => 5.14.1 @mui/x-data-grid-premium: ^5.17.0 => 5.17.0 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0

Search keywords: DataGrid column menu offscreen
Order ID: 96739

[michelengelen]

Hey @Iuli1478 and thanks for opening this issue.
As stated in the LTS doc page we do not support v5 anymore and therefor cannot offer support for it.

We did notice however that the described behavior still shows in the current version, so we will add this to our board and will provide a fix for that in a future release. So in order for you to benefit from that fix (and other features from the last and coming major releases) we encourage you to upgrade your data grid version. We have a dedicated section in the docs regarding the migration process for v5 -> v6 and for v6 -> v7.

[Iuli1478]

Hey @michelengelen, thank you for the response! Could you provide an estimated timeline for when we might expect a fix for this bug? In the meantime, is there any workaround you could suggest?