[tree view] Ordering does not work on Macos - WebKit through the WKWebView

[abarrafo]

Steps to reproduce

Steps:

1. Open this link to an example project, you'll need to pull down and run: https://github.com/bookcicle/mui-tauri-drag-n-drop-tree-example
2. Run the App on Macos
3. No ordering

Current behavior

Works as expected on Linux, Works in Safari (you can follow the node server to use the browser to interact), but does not work on desktop environment... which I think runs on Webkit on macos.

Attached:

WhatsApp.Video.2024-11-14.at.8.57.13.AM.mp4

Expected behavior

Ordering should work on Desktop WebDriver Environments for Macos, Linux, and Windows? Honestly im not certain this falls under your support model?

Context

We are building a desktop app for Macos, Linux, and Windows running on tauri with a Rust back end and a React + MUI frontend.

Your environment

System: OS: macOS 15.1 Binaries: Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm pnpm: Not Found Browsers: Chrome: 130.0.6723.117 Edge: Not Found Safari: 18.1 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.7 @mui/material: ^6.1.7 => 6.1.7 @mui/private-theming: 6.1.7 @mui/styled-engine: 6.1.7 @mui/system: 6.1.7 @mui/types: 7.2.19 @mui/utils: 6.1.7 @mui/x-internals: 7.21.0 @mui/x-license: 7.21.0 @mui/x-tree-view: ^7.22.1 => 7.22.1 @mui/x-tree-view-pro: ^7.22.1 => 7.22.1 @types/react: 18.3.12 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1

Search keywords: Tree Ordering MacOs WebDriver
Order ID: 101655

[michelengelen]

Hey @abarrafo ... it works for me ... Could you tell me if you run it in a specific mode or so... any detail helps

Screen.Recording.2024-11-14.at.15.39.54.mov

[abarrafo]

@michelengelen Yes, it works on the web page... Not on the desktop app.

[abarrafo]

npm run tauri dev should start a desktop app for you, which they run through webview/webdrivers. Chromium for Linux and Windows ( I think). And Webkit for macos (which is the base for Safari). It does work on safari or web browsers when navigating there directly.

[abarrafo]

My suspicion is you dont have cargo and rust setup? Thus your only running the npm dev server?

[abarrafo]

I'm fairly sure its a limitation of the underlying Webkit (20619.2.8.11.10 is mine) that does not support some browser feature your are relying on.

[michelengelen]

My suspicion is you dont have cargo and rust setup? Thus your only running the npm dev server?

Yes, i typically do not do that ... seems like this is a very specialized setup. I'll ask around in the team if anyone is familiar with it. If not I'll install the minimal setup for it. 👍🏼

[michelengelen]

Hey @abarrafo ... I did not have the time to install it yet, but did have a look in the bugtracker and it seems just recently there have been problems with the dropEffect in webkit browsers as well: Bug ticket 1 and Bug ticket 2

Could you try updating the webkit and try again? That would ideally already rule it out on our end. 👍🏼

[abarrafo]

Webkit versions are tied tightly to MacOs releases. I did update my MacOs for testing this to the latest developer beta, which bumped my webkit version from 20619.2.8.11.12 -> 20620.1.16.11.6

Results are the same. I did test out react-arborist, which had similar buggy behavior.

@dnd-kit works in another case though without issue for drag-n-drop. I might give wrapping my tree nodes for MacOs in a dnd-kit context and handling it there on my own. But, not sure I will have time to get around to that for a bit.

[michelengelen]

Considering that the other packages also have a bugged behavior I would say this is an issue with webkit and their implementation of the HTML drag and drop API.

It makes sense that dnd-kit works as well as they state in their docs ...

Unlike many drag and drop libraries, dnd kit is intentionally not built on top of the HTML5 Drag and drop API.

To support this we would need to rewrite the whole logic and that's out of the question. I hope you can understand that. Maybe you could open a ticket on their bugtracker to raise awareness?

I'll close this as an external bug for now, but will tag @LukasTy to see if he has an idea how we could approach this.

[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

@abarrafo How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[LukasTy]

Hello @abarrafo, I have found this relevant issue: tauri-apps/tauri#6695.
Based on it I added the following entry in the tauri.conf.json and the drag and drop behavior started working. 👌

"dragDropEnabled": false

[abarrafo]

Can't believe I didn't chek tauri issues for this. Thanks for digging that out! I can confirm it works now as expected.

…

On Mon, Dec 2, 2024 at 1:48 PM Lukas Tyla ***@***.***> wrote: Hello @abarrafo <https://github.com/abarrafo>, I have found this relevant issue: tauri-apps/tauri#6695 <tauri-apps/tauri#6695>. Based on it I added the following entry in the tauri.conf.json and the drag and drop behavior started working. 👌 "dragDropEnabled": false — Reply to this email directly, view it on GitHub <#15411 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADTGAQPIFCKZXIRNQLAIOCD2DRJJZAVCNFSM6AAAAABRYJAT32VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMJRGQ2TENZQGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>