[treeview] Escape does not cancel Drag n Drop

[JSHSJ]

Steps to reproduce

Steps:

1. Open this link to live example: https://react-pwdpdf.stackblitz.io (can also be tested in docs: https://mui.com/x/react-tree-view/rich-tree-view/ordering/)
2. Start dragging an item where it might be dropped
3. Press Escape

Current behavior

Item moves in the tree

Expected behavior

Drag'n'Drop is cancelled and item returns to initial position.

Context

Drag'n'Drop (per spec) is cancelled on Escape press. This is also the default browser behaviour.

We're building a TreeView of our File Structure. Users are allowed to drag and drop items to reorder them. Hitting Escape while dragging should stop the drag to prevent faulty drags.

Your environment

npx @mui/envinfo

System: OS: macOS 15.1 Binaries: Node: 18.18.2 - ~/.local/share/nvm/v18.18.2/bin/node npm: 9.8.1 - ~/.local/share/nvm/v18.18.2/bin/npm pnpm: Not Found Browsers: Chrome: 130.0.6723.117 Edge: 130.0.2849.80 Safari: 18.1 npmPackages: @emotion/react: 11.11.3 => 11.11.3 @emotion/styled: 11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.16.7 @mui/material: 5.15.21 => 5.15.21 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/styled-engine-sc: 5.8.0 => 5.8.0 @mui/styles: 5.15.2 => 5.15.2 @mui/system: 5.16.7 @mui/types: 7.2.18 @mui/utils: 5.16.6 @mui/x-data-grid: 6.10.0 => 6.10.0 @mui/x-date-pickers: 6.2.0 => 6.2.0 @mui/x-internals: 7.21.0 @mui/x-license: 7.15.0 => 7.15.0 @mui/x-tree-view: 7.22.0 @mui/x-tree-view-pro: 7.22.0 => 7.22.0 @types/react: 18.3.0 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 styled-components: 6.1.12 => 6.1.12 typescript: 5.1.6 => 5.1.6

Search keywords: tree view, cancel, drag n drop, escape
Order ID: 97202

[michelengelen]

Hey @JSHSJ and thanks for raising this.
It seems we need to adjust that behavior ... not sure how though ... I couldn't find a quick solution to it.

I'll add it to the board! 👍🏼

[JSHSJ]

Hey @michelengelen, thanks for looking into it.

For what it's worth, here is some more context and observations:

1. When a drag is cancelled via Escape, onDrop is never fired. This is true for native dnd and MUI's.
2. When a drag is cancelled, the DragEvent's dataTransfer.dropEffect is none instead of move in an uncancelled event
3. Setting defaultMuiPrevented to true in the onDragEnd listener prevents the move, but also prevents clearing up the drop indicator

Anyways, thanks for the fast response and good luck :D