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

mui-x/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx

Line 361 in 20129ab

updateProperty(fillerLeftRef.current!, 'width', widthDiff);

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:

mui-x/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx

Lines 419 to 422 in eba5169

	fillerLeftRef.current = findGridElement(apiRef.current, 'filler--pinnedLeft');
	fillerRightRef.current = findGridElement(apiRef.current, 'filler--pinnedRight');

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:

mui-x/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerFiller.tsx

Lines 57 to 69 in eba5169

	{leftPinnedWidth > 0 && (
	<PinnedLeft
	className={gridClasses['filler--pinnedLeft']}
	style={{ width: leftPinnedWidth }}
	/>
	)}
	<Main />
	{rightPinnedWidth > 0 && (
	<PinnedRight
	className={gridClasses['filler--pinnedRight']}
	style={{ width: rightPinnedWidth }}
	/>
	)}

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)

Screen.Recording.2024-03-06.at.10.16.17.mov

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

⚠️ 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.