search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.08k stars 1.26k forks source link

[data grid] Column header get stuck with dragging styles #14678

Open rodolffoteles opened 1 day ago

rodolffoteles commented 1 day ago

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

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[bot] commented 1 day ago

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 commented 1 day ago

Support key validator is failing on me

Captura de Tela 2024-09-19 às 16 00 42
k-rajat19 commented 1 day ago

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 commented 1 day ago

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

michelengelen commented 1 day ago

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