[data grid] Exception when printing styled Data Grid with hidden columns "Cannot read properties of null (reading 'cloneNode')"

[jamespAWH]

Steps to reproduce

https://stackblitz.com/edit/react-xrtnie-bypm8d?file=Demo.tsx%3AL19-L19

Steps:

1. Go to demo link above
2. Click Export then click print
3. Note the exception that appears

Current behavior

Cannot print a grid where this particular set of customisations exist. Additionally, refresh and try to hide or show columns via the "Manage columns" button. Note that the menu is hidden after you click a single column, which is different to the standard behaviour

Note that this appears to occur only in this particular set of circumstances: 1) Using styled to create a styled version of Data Grid (doesn't matter which styles are applied, can even be empty as it is in the demo link above) 2) Export toolbar is available (note the issue also occurs through the API call if you have the button somewhere else than the standard slot) 3) Managing columnVisibilityModel through state in your component manually rather than showing all columns by default

Expected behavior

Printing should not throw exception In Manage columns, you can tick or untick multiple columns without the manage columns menu being hidden

Context

I want to be able to successfully print a data grid that is styled and is using a columnVisibilityModel

Your environment

Replicated in Chrome and Edge

System: OS: Windows 11 10.0.22631 Binaries: Node: 21.7.3 - C:\Program Files\nodejs\node.EXE npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD pnpm: 9.1.0 - ~\AppData\Roaming\npm\pnpm.CMD Browsers: Chrome: Not Found Edge: Chromium (127.0.2651.74) npmPackages: @emotion/react: 11.11.1 => 11.11.1 @emotion/styled: 11.11.0 => 11.11.0 @mui/icons-material: ^5.14.0 => 5.15.19 @mui/material: ^5.16.7 => 5.16.7 @mui/styles: ^5.16.7 => 5.16.7 @mui/x-data-grid: ^7.12.1 => 7.12.1 @mui/x-data-grid-generator: ^7.12.1 => 7.12.1 @mui/x-date-pickers-pro: ^7.11.1 => 7.11.1 @types/react: 18.2.24 => 18.2.24 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 5.4.5 => 5.4.5

Search keywords: cloneNode printing columns datagrid

[jamespAWH]

I have found that using sx prop instead of using styled does not cause this issue, so I have a workaround

[michelengelen]

Thanks for following up, but the cause of this is actually that the grids rootelement ref is not available. This is likely due to the wrapping in styled ...

@cherniavskii is this something we need to take a look into?

[jamespAWH]

That's correct. As noted in the bug description, it only occurs when using styled and also using a column visibility model.

[michelengelen]

I'll add this to the board for now. Since this is a bug that happens only under very certain circumstances I think we can discuss this in the team!