[data grid] Error while resizing pinned columns

[eknkc]

Steps to reproduce

On the 7 beta 2, datagrid-pro seems to cause an error when one tries to pin a column and then resize it.

Looks like the error happens here: https://github.com/mui/mui-x/blob/20129ab6886a2ede8c214c470421a81e9df93e51/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx#L361

fillerLeftRef.current is null in my case.

Here's the error in my Next.js error handler:

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.2.1 Binaries: Node: 20.6.1 - ~/Library/Caches/fnm_multishells/33066_1707823615376/bin/node npm: 9.8.1 - ~/Library/Caches/fnm_multishells/33066_1707823615376/bin/npm pnpm: 8.15.2 - ~/Library/Caches/fnm_multishells/33066_1707823615376/bin/pnpm Browsers: Chrome: 121.0.6167.160 Edge: 121.0.2277.112 Safari: 17.2.1 npmPackages: @emotion/react: ^11.11.3 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.36 @mui/core-downloads-tracker: 5.15.10 @mui/material: ^5.15.10 => 5.15.10 @mui/private-theming: 5.15.9 @mui/styled-engine: 5.15.9 @mui/system: 5.15.9 @mui/types: 7.2.13 @mui/utils: 5.15.9 @mui/x-data-grid: 7.0.0-beta.2 @mui/x-data-grid-pro: ^7.0.0-beta.2 => 7.0.0-beta.2 @mui/x-license: 7.0.0-beta.2 @types/react: ^18.2.14 => 18.2.55 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: ^5.1.6 => 5.3.3 ```

Search keywords: reading 'style' Order ID: 84197

[eknkc]

Small update:

This seems to only happen when react strict mode is enabled. If I disable strict mode in next config, the error goes away.

Edit: No, my bad. It still happens but intermittently. I guess strict mode calling effects twice in development mode might have something to do with it. Surfacing the problem more in a more deterministic way.

[michelengelen]

@romgrk this seems related to #10059 ... The problem is that the apiRef.current.findGridElement() is not finding the element:

https://github.com/mui/mui-x/blob/eba51693e9be42e38e8aeef7b9a526876865df6d/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx#L419-L422

It seems like it never gets rendered in the first place, although it should according to this, when using the demo from the docs on column pinning:

https://github.com/mui/mui-x/blob/eba51693e9be42e38e8aeef7b9a526876865df6d/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx#L57-L69

Could you check that please?

nit: the class param on the findGridElement helper is named klass.

[romgrk]

Probably closed with #12209. Can you confirm if it's still reproducible?

[michelengelen]

@romgrk I can confirm that #12209 fixed this bug. I did notice however, that the resize element is now very hard to reach (i guess its because it has a width of just 2px)

https://github.com/mui/mui-x/assets/32863416/4157c158-17af-4b39-9a8b-4e43f04e5c46

[michelengelen]

Since the original issue is resolved I will close this now. I have created a new issue for the resize handle width. Thanks @romgrk!!! 🚀

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem, please open a new issue and provide details about your specific problem. If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @eknkc? Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.