Open gpspake opened 1 year ago
It's the same problem from https://github.com/mui/mui-x/issues/5085. I thought we had fixed this.
@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
Duplicates
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:
Confirm that this is related to Tabs (presumably
display: none
)<Tabpanel>
wrappers out so the Datagrids are both displayed in aBox
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 https://github.com/mui/mui-x/issues/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 inonStateChange
. 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 https://github.com/mui/mui-x/issues/8489.
Your environment 🌎
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 ```npx @mui/envinfo
Order ID or Support key 💳 (optional)
No response