[data grid] How do I fix this? - GridVirtualScrollbar.js:88 Uncaught TypeError: Cannot set properties of null (setting 'scrollTop')

[swensel]

The problem in depth

I'm facing an issue and I'm not sure how easy it will be to create a simple reproducible example for this, but I'm wondering if there's any pointers you can give.

I have upgraded the following libraries:

"@mui/icons-material": "^5.3.1",
"@mui/material": "^5.4.0",
"@mui/x-data-grid": "^5.5.0",
"@mui/x-data-grid-pro": "^5.12.0",
"@mui/x-date-pickers": "^5.0.14",
"@mui/x-license-pro": "^5.12.0"

to these new versions, and that's when I started to notice this issue:

"@mui/icons-material": "^5.15.19",
"@mui/material": "^5.15.19",
"@mui/x-data-grid": "^7.5.1",
"@mui/x-data-grid-pro": "^7.5.1",
"@mui/x-date-pickers": "^7.5.1",
"@mui/x-license": "^7.2.1"

I have a grid that is using @mui/x-data-grid-pro, that also has some custom quick filters.

Sometimes, after selecting or clearing the quick filters, I get this error:

GridVirtualScrollbar.js:88 Uncaught TypeError: Cannot set properties of null (setting 'scrollTop')
    at GridVirtualScrollbar.js:88:1
    at HTMLDivElement.<anonymous> (useEventCallback.js:18:1)

That is coming from inside the MUI library:

There's no way I can catch this error or anything, due to it being from inside the library. The grid still loads after, but it looks pretty bad on local, and it will also be logged to the console regardless.

I did find this scrollTop issue mentioned in the v4 to v5 migration, which looks like a similar error, but I don't think it is the same case. I don't see anything mentioned about the specific error in the v5 to v6 migration or v6 to v7 migration docs.

Any idea how to fix or catch this error?

Thanks.

Your environment

`npx @mui/envinfo`

  System:
    OS: macOS 14.5
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 125.0.6422.61
    Edge: 121.0.2277.128
    Safari: 17.5
  npmPackages:
    @emotion/react: ^11.7.1 => 11.11.4 
    @emotion/styled: ^11.6.0 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.19 
    @mui/icons-material: ^5.15.19 => 5.15.19 
    @mui/material: ^5.15.19 => 5.15.19 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14 
    @mui/utils:  5.15.14 
    @mui/x-data-grid: ^7.5.1 => 7.5.1 
    @mui/x-data-grid-pro: ^7.5.1 => 7.5.1 
    @mui/x-date-pickers: ^7.5.1 => 7.5.1 
    @mui/x-license: ^7.2.1 => 7.2.1 
    @types/react: ^17.0.1 => 17.0.80 
    react: ^17.0.1 => 17.0.2 
    react-dom: ^17.0.1 => 17.0.2 
    typescript: ^4.8.4 => 4.9.5 

Search keywords: scrolltop
Order ID: 90881

[michelengelen]

Hey @swensel
Thanks for opening an issue here.

I cannot reproduce the issue you are mentioning.

Is there any customization you did to the data grid?
Even CSS stylings could be important, since this is related to the scrollbar reference not being present although it should be.

[swensel]

Hi @michelengelen , thanks, there are custom styles, but none should affect the scrollbar. When the page first loads, the grid is fine. The issue occurs after re-rendering the grid, i.e. when our custom quick filters are triggered, it can happen, but the issue is sporadic. It seems to be a bit of an edge case. However, the issue is within the library, so there's not really anything we can do. Would it maybe make sense to catch this error within the library? Also, on @mui/x-data-grid-pro 5.12.0, we can not reproduce this issue. It seems to have been introduced in @mui/x-data-grid-pro 7.5.1.

Here are the custom styles for reference:

const tableStyle = {
  border: 'none',
  '& .mls-link': {
    ':hover': {
      color: CommonColors.DARK_BLUE,
      fontWeight: 'bold',
    },
  },
  '& .ellipsis-text': {
    width: '100%',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
  '& .super-app-theme--header': {
    color: DetailViewColors.ORANGE,
    fontSize: '18px',
    border: 'none',
  },
  '& .MuiDataGrid-columnHeaderTitleContainer': {
    padding: '0px',
  },
  '& .MuiCheckbox-root svg': {
    width: 18,
    height: 18,
    backgroundColor: 'transparent',
    borderRadius: 1,
  },
  '.MuiPagination-ul': {
    display: 'none',
  },
  '& .MuiPaginationItem-icon': {
    backgroundColor: CommonColors.ORANGE_BACKGROUND,
    borderRadius: 9,
    width: 24,
    height: 24,
  },
  '& .MuiPagination-root  MuiPaginationItem': {
    marginTop: '-70px',
  },
  '& .MuiDataGrid-cell': {
    fontSize: '14px',
    color: CommonColors.DARK_BLUE,
    fontWeight: 100,
  },
  '& .super-app-theme--cell': {
    color: CommonColors.LIGHT_BLUE,
    fontSize: '14px',
    fontWeight: 100,
    textDecoration: 'underline',
    cursor: 'pointer',
  },
  '&.MuiDataGrid-root .MuiDataGrid-cell:focus-within': {
    outline: 'none',
  },
};

The table is also wrapped in <div style={{ width: '100%', height: '750px' }}>.

[michelengelen]

So, the grid is fine until there are things rendered that come later? In your case you do render quickfilters after the initial render, is that correct? That could already be a hint to whats going wrong.

Could you try to replicate using a minimal reconstruction of your implementation? Without that it will be near impossible to find the issue.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.

[swensel]

Hi @michelengelen, the plan is to try to provide a standalone demo. That is just going to take some time as my team has other priorities. Should I file a new issue for that when it is ready, since this was automatically closed? Thanks.

[michelengelen]

Hi @michelengelen, the plan is to try to provide a standalone demo. That is just going to take some time as my team has other priorities. Should I file a new issue for that when it is ready, since this was automatically closed? Thanks.

No, you can open a new one once the demo is ready and reference this! 👍🏼

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@swensel: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[theodoremoreland]

I'm not the original poster, but I did encounter the same error. I created a repo dedicated to recreating and documenting the error here: https://github.com/theodoremoreland/mui-x-data-grid-bug-demo

I used two combinations of package versions to similar effect. The main branch features older versions as those are similar to what I use at work (where I encountered the error). The other branch uses latest versions for most packages.

I will consider deploying the code and/or creating a new issue tomorrow.

[theodoremoreland]

Hi @michelengelen, the plan is to try to provide a standalone demo. That is just going to take some time as my team has other priorities. Should I file a new issue for that when it is ready, since this was automatically closed? Thanks.

No, you can open a new one once the demo is ready and reference this! 👍🏼

I created a new issue with demo and reproduce steps here: #14987