Datagrid only has 3 columns when filters are applied and the Datagrid is hidden via { display: none };

[gpspake]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/datagrid-pro-shared-filters-1qpix9?file=/src/App.tsx

Steps to reproduce:

• On initial load, note that the data in the "Current Period" Tab's Datagrid and the "Previous Period" Tab's Datagrid match the respective stringified visible rows rendered above.
• From the "Current Period" tab, add a filter to column 1 for contains "He"
• Note the filters are applied to the Datagrid and the visible rows for each period.
• Click on the "Previous Period" tab
• Note there are only 3 columns
• Adding/Removing/Clearing will usually fix/reset the columns but cause the same behavior on the Datagrid in the other tab.

Confirm that this is related to Tabs (presumably display: none)

• Comment the <Tabpanel> wrappers out so the Datagrids are both displayed in a Box
• Repeat the steps above.
• Note that all of the columns are present and the bug can't be reproduced.

Current behavior 😯

I have a case where I'm sharing filters between two different datagrids in tab panels. The tab panels are configured to be hidden via CSS when they are not active so the Datagrids are rendered even when they are not visible. For more context see #8489.

When the Datagrids are both rendered and visible, the filtering works as expected; changing the filters in one Datagrid results in the same filters being applied to the other Datagrid. However, when the Datagrids are in Tabs, and one is hidden via display: none on its container, setting filters will result in the hidden tab only having 3 columns (regardless of the total number of columns). This is despite both sets of visible rows being observably correct in onStateChange. The columns aren't just hidden by CSS; they are not in the JSX/dom. Unless I'm missing something obvious, it seems like this behavior only happens when filters are applied when the CSS display property is set to none 🤔

Expected behavior 🤔

I would expect the Datagrids to behave exactly the same whether they are both visible or one is hidden via display: none

Context 🔦

I'm sharing filters between two Datagrids and setting the visible rows for each Datagrid to state so I can used the filtered rows outside of the datagrid. For more context see #8489.

Your environment 🌎

npx @mui/envinfo

Tested in Firefox and Chrome

  System:
    OS: macOS 12.5.1
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: 111.0.1
    Safari: 15.6.1
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base:  5.0.0-alpha.121 
    @mui/core-downloads-tracker:  5.11.13 
    @mui/icons-material: ^5.11.11 => 5.11.11 
    @mui/material: ^5.11.13 => 5.11.13 
    @mui/private-theming:  5.11.13 
    @mui/styled-engine:  5.11.11 
    @mui/styled-engine-sc: ^5.11.11 => 5.11.11 
    @mui/styles:  5.11.7 
    @mui/system: ^5.11.13 => 5.11.13 
    @mui/types:  7.2.3 
    @mui/utils:  5.11.13 
    @mui/x-data-grid: ^6.0.2 => 6.0.2 
    @mui/x-data-grid-pro: ^6.0.2 => 6.0.2 
    @mui/x-license-pro:  6.0.2 
    @types/react:  17.0.40 
    react: ^16.8.2 => 16.14.0 
    react-dom: ^16.8.2 => 16.14.0 
    styled-components: ^5.3.6 => 5.3.6 

Order ID or Support key 💳 (optional)

No response

[m4theushw]

It's the same problem from #5085. I thought we had fixed this.

[gpspake]

@m4theushw Still not sure what is happening but I found a fix! After doing a few things to verify that display: none was causing this, I tried visibility: hidden with some additional css to fix the positioning and it works.
I didn't add the additional css here so there's still a space for the hidden tab but this shows it working....
https://codesandbox.io/s/datagrid-pro-shared-filters-forked-8rrdgp?file=/src/App.tsx