[DataGrid] Issue in datagrid drop down options z-index

[gaurav7576]

Steps to reproduce

Link to live example: (required)

Steps:

1. Open https://mui.com/x/react-data-grid/
2. Scroll to Commercial versions | Pro Plan
3. Click on Unit Price Currency
4. Scroll left/right - Options will overlap with other sections and not hiding with datagrid

Current behavior

In data grid, editable drop down options is not hiding when parent column is hiding.
Overlapping with other right or left components not part of data grid.

Expected behavior

During scroll, options of select drop down will hide in data grid with parent select box.

Context

We are using MUI-X and option is overlapping with other components blocking to perform other operations not part of data grid.

Your environment

System:
OS: Windows 11 10.0.22621
Binaries:
Node: 14.21.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.17 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Chromium (119.0.2151.97)
npmPackages:
@emotion/react: 11.11.1
@emotion/styled: 11.11.0
@mui/icons-material: ^5.14.14 => 5.14.19
@types/react: 18.2.42
react: ^17.0.0 => 17.0.2
react-dom: ^17.0.0 => 17.0.2

Search keywords: datagrid editable dropdown z-index
Order ID: 59921

[michelengelen]

Hey @gaurav7576 ... I can confirm this bug. I know that the team is working on improving scrolling in general and this might already be fixed with that effort and to be released in v7.

@romgrk could you check if this still happens with the new scrolling approach? If not we can move this to the board. Thanks! 🙇🏼

[michelengelen]

@gaurav7576 one possible workaround for your implementation could be to set the disablePortal prop on the AutoComplete component (if you are using @mui/material/Autocomplete)

[gaurav7576]

Dear Concerned, Already tried disablePortal property in autocomplete but it disables complete drop down. Regards, Gaurav

…

On Mon, Dec 18, 2023 at 2:36 PM Michel Engelen ***@***.***> wrote: @gaurav7576 <https://github.com/gaurav7576> one possible workaround for your implementation could be to set the disablePortal prop on the AutoComplete component (if you are using @mui/material/Autocomplete) — Reply to this email directly, view it on GitHub <#11418 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AL7PCISJWYSB3AVGJLXDL7TYKABS3AVCNFSM6AAAAABAWABQ2KVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNJZHA2TCNZZGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[michelengelen]

@gaurav7576 here is a little demo on how that can look like. It is basically the same as the demo in the docs. I just changed the props a bit to also accept disablePortal and now it works. This should work the same with the default AutoComplete component

[romgrk]

Sorry I don't understand the issue, can you clarify how to reproduce or show screenshots? The preview deployment for that PR is here if you want to verify it directly: https://deploy-preview-10059--material-ui-x.netlify.app/x/react-data-grid/#pro-plan

[michelengelen]

Hey @romgrk I took the liberty to record a short video.

Screen.Recording.2023-12-19.at.09.46.59.mov

[romgrk]

This will not be handled by the sticky PR.

@mui/xgrid What behavior do we expect in the example above? I see a few ways to fix things but it could be messy. It could be adding a parent with only overflow-x, and put the portal inside the grid (but still outside the viewport). It could be adding a clip-path that covers the vertical region of the grid only. For the headers' menu, we close any popover when the user starts scrolling.

[michelengelen]

This will not be handled by the sticky PR.

I suspected that much, but wanted to ask anyways.

@mui/xgrid What behavior do we expect in the example above?

IMO we should probably copy the behavior from the header menus. This feels the most logical to me, since when I am scrolling away from the dropdown I normally don't want to interact with it anyways. On the other hand: users might want to scroll away to look for additional information and come back to select an option.
So we need a tradeoff for one use-case and the first option seems to me as the better one, since it ...

1. feels more like what I would expect
2. will naturally "prevent" this bug from appearing again

WDYT?

[cherniavskii]

Interestingly, the issue is not reproducible with the cells that use the Select component - try editing the Status column cells and scroll.
The difference is that Select uses Popover that blocks the scroll, while Autocomplete uses Popper that doesn't 🙂

Maybe there's a way for Autocomplete to block the scroll too?

[romgrk]

But which behavior do we think is best? Let's first agree on that, then we can look for solutions. I'm not sure what's the best option, I think scrolling can be useful if the user needs to look at some information, so it would be nice to preserve that, but I'm not entirely sure what should happen to the popups.

On the select vs autocomplete, maybe it's because select's popup menu doesn't require user input anywhere else on the page while it's open, whereas autocomplete can be interacted with both in its input component and in its popup.

[cherniavskii]

I find closing the popover on scroll the best option here

[michelengelen]

I find closing the popover on scroll the best option here

me too

[gaurav7576]

According to me, scrolling the popover is best option because we are using click to open and close. If we close it, we are performing click which user is not performing and system is working on behalf of user.
And we must hide popover so that it will not overlap over other component which may have primary actions to work on screen.
We must block component inside provided space.

[gaurav7576]

@michelengelen Provided Demo Link is working fine when scroll towards left but issue is there when scrolling towards right.

[michelengelen]

@michelengelen Provided Demo Link is working fine when scroll towards left but issue is there when scrolling towards right.

@gaurav7576 Pardon me. I forgot to set a certain modifier on the Popper props. I adjusted the demo and for additional reference: Popper component docs and Popper API.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.