[data grid] Column header get stuck with dragging styles

[rodolffoteles]

The problem in depth

Hi,

When dragging columns to perform the column reorder, sometimes the column header get stuck in the dragging state. The class MuiDataGrid-columnHeader--dragging is not removed even though the columnHeaderDragEnd event is emitted.

The most stable way I have to reproduce this is clicking and dragging on the edge of the menu icon button. The drag is suddenly aborted, even though I do not actually release the click, and the class is not removed.

Demo:
Reproducible on example of the column ordering docs.

Steps:
1 - Click and drag the edge of the menu icon button on header
2 - See stuck header styles

Recording:
Video:
https://github.com/user-attachments/assets/8edcf50b-0289-4dea-9768-a0819d43d9dc

Gif:

Your environment

`npx @mui/envinfo`

System:
OS: macOS 12.7.3
Binaries:
Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
pnpm: 8.15.1 - ~/.nvm/versions/node/v20.12.2/bin/pnpm
Browsers:
Chrome: 128.0.6613.138
Edge: 128.0.2739.79
Safari: 15.6.1
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/core-downloads-tracker: 6.1.1
@mui/icons-material: 6.0.2
@mui/material: ^6.1.1 => 6.1.1
@mui/private-theming: 6.1.1
@mui/styled-engine: 6.1.1
@mui/system: 6.1.1
@mui/types: 7.2.17
@mui/utils: 6.1.1
@mui/x-data-grid: 7.17.0
@mui/x-data-grid-generator: ^7.17.0 => 7.17.0
@mui/x-data-grid-premium: ^7.17.0 => 7.17.0
@mui/x-data-grid-pro: 7.17.0
@mui/x-internals: 7.17.0
@mui/x-license: 7.17.0
@types/react: ^18 => 18.3.5
react: ^18 => 18.3.1
react-dom: ^18 => 18.3.1
typescript: ^5 => 5.5.4

Search keywords: data grid, column ordering

[github-actions]

You have created a support request under the "Priority Support" terms, which is a paid add-on to MUI X Premium ⏰. Please validate your support key using the link below:

https://tools-public.mui.com/prod/pages/jyhs86t?repo=mui-x&issueId=14678

Do not share your support key in this issue!

Priority Support is only provided to verified customers. Once you have verified your support key, we will remove the support: unknown label and add the support: priority label to this issue. Only then the time for the SLA will start counting.

[rodolffoteles]

Support key validator is failing on me

[k-rajat19]

Hi,
thanks for your feedback
I think dragging styles should be explicitly removed in this case, Currently, styles are removed by 0ms setTimeout but it seems like in this case it got cleared in columnHeaderDragEnd event before getting a chance to execute.

The drag is suddenly aborted, even though I do not release the click, and the class is not removed.

And I think abortion of event in this case is bound to happen and I don't see anything that can be done about it.

[k-rajat19]

Here you can see improved behavior:
https://deploy-preview-14680--material-ui-x.netlify.app/x/react-data-grid/column-ordering/

[michelengelen]

Thanks for opening a PR @k-rajat19... I just assigned reviewers and triaged it. Should be picked up soon!

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

We value your feedback @rodolffoteles! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!