[data grid] Row reordering does not work in Chromium running inside GNOME Wayland session

[TheWeirdDev]

Steps to reproduce

Link to live example: https://mui.com/x/react-data-grid/row-ordering/

Steps:

1. Create a simple datagrid
2. enable rowReordering
3. Observe onRowOrderChange is never called and ordering does not change after the user stops dragging.

Current behavior

After the user stops dragging and drops a row, it does not stay in the new position. Instead it snaps back to its old place. The callback for onRowOrderChange is not called.

Expected behavior

The onRowOrderChange function must be called and the row ordering should work as intended.

Context

Just simple row reordering.

Your environment

npx @mui/envinfo

``` System: OS: Linux 6.10 Arch Linux Binaries: Node: 22.7.0 - /usr/bin/node npm: 10.8.3 - /usr/bin/npm pnpm: 9.7.1 - /usr/bin/pnpm Browsers: Chrome: Not Found npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/icons-material: 6.0.1 => 6.0.1 @mui/lab: 6.0.0-beta.8 => 6.0.0-beta.8 @mui/material: ^6.0.1 => 6.0.1 @mui/styles: ^6.0.1 => 6.0.1 @mui/x-data-grid-premium: ^7.15.0 => 7.15.0 @mui/x-data-grid-pro: ^7.15.0 => 7.15.0 @mui/x-date-pickers: ^7.15.0 => 7.15.0 @mui/x-date-pickers-pro: ^7.15.0 => 7.15.0 @mui/x-license: ^7.15.0 => 7.15.0 @mui/x-tree-view: ^7.15.0 => 7.15.0 @types/react: ^18.3.5 => 18.3.5 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 styled-components: ^6.1.13 => 6.1.13 typescript: ~5.3.3 => 5.3.3 ```

Search keywords: row reordering

[TheWeirdDev]

I Just tried it on Firefox and it works but on Edge/Chromium it does not.

[michelengelen]

@TheWeirdDev Which version of chrome are you using? It works for me on chrome v127.0.6533.120:

https://github.com/user-attachments/assets/65391025-a8e7-4375-917a-087c148f48f6

[TheWeirdDev]

I tried these two:

1. Chromium: 128.0.6613.113
2. MS Edge: 128.0.2739.42

Both failed to reorder the rows.

https://github.com/user-attachments/assets/c8dedf19-00b9-4228-a2ee-fdf9e989e615

[michelengelen]

@noraleonte would you be able to test this? I have no (working) Windows PC available atm.

[michelengelen]

Hey @TheWeirdDev we both cannot reproduce this. Could you try the reordering in a private window or a fresh browser install (no plugins, settings, etc.)?

[TheWeirdDev]

I used a fresh install and found out it only fails if the browser is running in a native Wayland window in GNOME desktop.

1. chromium --user-data-dir=/tmp/test/ --ozone-platform=x11: Works ✅
2. chromium --user-data-dir=/tmp/test/ --ozone-platform=wayland: Fails ❌

This seems like a GNOME or Chromium bug. Sorry for the inconvinience.

[michelengelen]

Ah, that's also a possibility I haven't thought of. Could be that the events are not transfered correctly.

@romgrk if i recall correctly you are using wayland as well, right? Could you have a quick look if you have some time? Thanks!

[TheWeirdDev]

Other web pages with drag and drop (using React or vanilla JavaScript) work fine on Wayland, that's why I didn't notice it sooner.

For example, I tried this one: https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

And this one: https://jakesidsmith.com/react-reorder/

And both work just fine.

[romgrk]

Yes I'm on Gnome/Wayland. I can reproduce but only by explicitly passing --ozone-platform=wayland or by setting the ozone flag to Auto or Wayland.

Considering that the browser is behaving differently on different platforms, I would tend to classify this is a chromium bug. Those other examples might not be using the dragend event and might only be reacting to dragmove. It would explain why our example handles reordering correctly while the row is being dragged but goes back to its initial position when the drag ends.

Have you looked in their bug tracker? Could you open a bug on crbug.com to check with them what's going on?

[TheWeirdDev]

Have you looked in their bug tracker? Could you open a bug on crbug.com to check with them what's going on?

I'm not exactly sure what mui datagrid is doing under the hood and what is causing the bug to be able to confidently open an issue. Can you provide a very simple code example that reproduces the bug?

[michelengelen]

@TheWeirdDev as @romgrk we do listen on dragend event to perform the reordering action, but that might not be fired correctly ... I am not able to test this specifically, but if you want you can hook into this method to log the event:

https://github.com/mui/mui-x/blob/1b4d3b2a03a1d650a3bfc035d1383bba1068eb31/packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx#L155-L192

If you need help setting up a fork and run the playground locally you can follow the contribution guide here: CONTRIBUTING.md

[TheWeirdDev]

@TheWeirdDev as @romgrk we do listen on dragend event to perform the reordering action, but that might not be fired correctly

I tried this example of dragend and it worked without an issue. I'll be looking into datagrid with the mentioned playground and report back if I find more info.

[TheWeirdDev]

This is what happens:

dropEffect is equal to none and it puts the row back into the original place and the rowOrderChange event is not fired.

[TheWeirdDev]

Another thing is that dataTransfer.effectAllowed is equal to uninitialized but I assume it should be move or copyMove?

Nevermind, uninitialized should allow all effects.

[michelengelen]

Could you also check if the value is set if you use a modifier key (STRG, ALT or SHIFT), since that might change it according to this doc on MDN?

[TheWeirdDev]

I tried the modifier keys. With SHIFT, you cannot start dragging, and with CTRL and ALT the issue persists. Same thing happens with combination of modifier keys.

[TheWeirdDev]

When i manually set dropEffect to move in the console, it works.

event.dataTransfer.dropEffect = "move"

~~According to the MDN example you can set this value in dragOver handler. And indeed, when I added that line to the handleDragOver, it worked!~~

---

EDIT: It works when I set a breakpoint anywhere inside handleDragOver, even without changing the value of dropEffect

[romgrk]

Duplicate of #11660 Chromium issue: https://issues.chromium.org/u/2/issues/40068941

I don't think we can do anything, otherwise we'd be changing the behavior for dropping outside the grid. You can comment on the chromium issue to ping them, but the issue doesn't seem very high priority for them. Might be faster to send them a PR with the fix, though I'm not sure if google accepts external contributions.