[data grid] onColumnWidthChange called before autosize affects column width

[rippi]

Steps to reproduce

Link to live example: https://react-tud9tc.stackblitz.io

Steps:

1. open console to see logs
2. resize column by dragging => new column width is logged as expected
3. autosize column by double-clicking its edge => old column width is logged (wrong behavior)
4. autosize column again => correct column width after autosize is logged

Current behavior

onColumnWidthChange gets called before autosizing is completed. It is instead called with the column width before autosizing. The second time autosizing calls onColumnWidthChange again, this time with the correct width.

Expected behavior

onColumnWidthChange gets called with the new column width after autosizing is completed

Context

Saving column widths changed by the user in external storage, so it can be retrieved and applied if the same DataGrid is opened again by said user.

Your environment

npx @mui/envinfo

Used Chrome 121.0.6167.141 even though not listed

System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.14.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (121.0.2277.106)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/icons-material: ^5.15.9 => 5.15.9
    @mui/material: ^5.15.9 => 5.15.9
    @mui/x-data-grid-pro: ^6.19.3 => 6.19.3
    @types/react: ^18.2.47 => 18.2.47
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.3.3 => 5.3.3

Search keywords: autosize

[michelengelen]

I can confirm this behavior (bug).
I'll put it on the board for the team to have a look at.
thanks for raising this issue @rippi 🙇🏼

[shaharyar-shamshi]

@michelengelen I was looking into this issue the problem is before mouseDoubleClick event get trigger mouseUp event is trigger which publish the event of the columnWidthChange with the previous width so we need to stop this behaviour
and publish the event once the column is resized after mouseDoubleClick.

Attaching the reference code of previous implementation

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

Line 443 in 42d6bae

const handleResizeMouseUp = useEventCallback(finishResize);

if you can assign this to me. I can work on the issue

[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 @rippi?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.