[data grid] Column reordering does not always stick even when drag preview shows column in new location

[spagnon7]

Steps to reproduce

See video of this reproducible on the first demo in the column reordering documentation:

Column.reordering.issue.mov

Steps:

1. Open this link to live example: https://mui.com/x/react-data-grid/column-ordering
2. Drag and drop the first column a few columns to the right
3. Hover the dragged column above the new desired location, such that the drag preview shows up in the right location.
4. Drop the column a little above, to the right, or to the left of the new desired position, but in a way such that the drag preview still still shows up in the new desired position (see attached video)

Current behavior

The dragged column does not get reordered to the location indicated by the drag preview, but instead flies back to its original location.

Expected behavior

The dragged column gets reordered to the location indicated by the drag preview.

Context

Have a smooth UX for column reordering, such that if the drag preview is showing the column in a new location, dropping the column at that point will always result in the column being successfully reordered to that new location.

Your environment

N/A - this is reproducible on the first demo in the column reordering documentation (see attached video under Steps to Reproduce)

Search keywords: DataGrid column reordering drag drop

[michelengelen]

Hey @spagnon7 ... this is our default behavior, but you can enable what you are describing with the prop keepColumnPositionIfDraggedOutside.

It is documented here: https://mui.com/x/api/data-grid/data-grid-pro/#data-grid-pro-prop-keepColumnPositionIfDraggedOutside

[spagnon7]

@michelengelen Got it, thanks for point that out, that does address it. One thing I noticed is that the "fly back to original position" animation still exists with that prop, even though the column stays in the new location, which may be confusing for users. Would it be possible to remove that animation as well when keepColumnPositionIfDraggedOutside=true?

column.fly.back.mov

[michelengelen]

I am not sure if this is possible.
@KenanYusuf do you know if we could possibly support that?

[spagnon7]

hi @michelengelen @KenanYusuf just a friendly check in on that last point

[michelengelen]

@arminmeh could you have a look at this?

[arminmeh]

@spagnon7 @michelengelen

I have opened a PR with the fix
#19372