Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Fix error logged during skeleton loading with nested data grid #14186

Merged
merged 3 commits into from
Aug 14, 2024

Conversation

KenanYusuf
Copy link
Contributor

@KenanYusuf KenanYusuf commented Aug 13, 2024

When the skeleton loader is active, we hide the data grid scroller contents and vertical scrollbar with CSS. This works well for most cases, however, causes an issue when a data grid is nested within master details. A short summary of what happens:

  1. A master detail is expanded with a data grid rendered inside
  2. The main data grid loading prop gets set to true
  3. The nested data grid logs the following error:
    MUI X: useResizeContainer - The parent DOM element of the data grid has an empty height. Please make sure that this element has an intrinsic height. The grid displays with a height of 0px.

Fixes #14061

@KenanYusuf KenanYusuf requested a review from a team August 13, 2024 12:30
@KenanYusuf KenanYusuf added the component: data grid This is the name of the generic UI component, not the React module! label Aug 13, 2024
@mui-bot
Copy link

mui-bot commented Aug 13, 2024

Deploy preview: https://deploy-preview-14186--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 02ec8b5

@cherniavskii cherniavskii added the bug 🐛 Something doesn't work label Aug 13, 2024
/* Hide grid rows and vertical scrollbar when skeleton overlay is visible */
[`& .${c['main--hasSkeletonLoadingOverlay']}`]: {
[`& .${c.virtualScrollerContent}, & .${c['scrollbar--vertical']}, & .${c.pinnedRows}`]: {
display: 'none',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried doing this instead:

visibility: 'hidden',
position: 'fixed',

It seems to work, but I'm unsure if this would work in every scenario.
What do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does seem to work - I thought we tried this the other day 😅. I will do some more thorough testing to double check different scenarios.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to be the ideal combination here. The virtual scroller content retains it's height with visibility: hidden, fixing the issue with nested data grid. And position: fixed takes the element out of the flow. Will make the change, thanks @cherniavskii for taking a look.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great! 🎉

@KenanYusuf KenanYusuf merged commit 1deed31 into mui:master Aug 14, 2024
18 checks passed
@KenanYusuf KenanYusuf deleted the skeleton-loading-nested-grid-fix branch August 14, 2024 12:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[data grid] Skeleton Loading Overlay Triggers Error with Master Detail Panel Containing Another DataGrid
3 participants