[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.