File drag and drop displays file in Linux WebKit

[makew0rld]

Description

When dragging and dropping a file on to the Window, my OnFileDrop handler runs successfully, but the entire GUI is replaced with a view of the file, if the browser supports it. For example all my HTML is replaced with the default browser HTML to display an image (if I dropped in an image file), or for a PDF, etc. This means I can't do anything with the file because all of my UI is gone.

To Reproduce

1. Enable file dropping and add a simple handler (one that logs, for example)
2. Try and drop an image file with WebKit on Linux
3. Observe the UI get replaced with a view of the image

Expected behaviour

The file view does not appear at all.

Screenshots

No response

Attempted Fixes

Setting DisableWebViewDrop: true just made drag and drop impossible, and did not fix the problem.

System Details

# Wails
Version         | v2.9.1
Package Manager | pacman

# System
┌───────────────────────────────────────────────────────────────────────────────────────┐
| OS           | Arch Linux                                                             |
| Version      | Unknown                                                                |
| ID           | arch                                                                   |
| Go Version   | go1.22.3                                                               |
| Platform     | linux                                                                  |
| Architecture | amd64                                                                  |
| CPU          | 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz                         |
| GPU          | TigerLake-LP GT2 [Iris Xe Graphics] (Intel Corporation) - Driver: i915 |
| Memory       | 15GB                                                                   |
└───────────────────────────────────────────────────────────────────────────────────────┘

# Dependencies
┌───────────────────────────────────────────────────────────────────┐
| Dependency | Package Name | Status    | Version                   |
| *docker    | docker       | Installed | 1:27.1.1-1                |
| gcc        | gcc          | Installed | 14.2.1+r32+geccf707e5ce-1 |
| libgtk-3   | gtk3         | Installed | 1:3.24.43-1               |
| libwebkit  | webkit2gtk   | Installed | 2.44.2-1                  |
| npm        | npm          | Installed | 10.8.2-1                  |
| pkg-config | pkgconf      | Installed | 2.1.1-1                   |
└───────────────────── * - Optional Dependency ─────────────────────┘

# Diagnosis
 SUCCESS  Your system is ready for Wails development!

Additional context

I haven't tested to see if this occurs with WebKit on other OSes, like macOS.

[makew0rld]

I have a repo to reproduce this bug here: https://github.com/makew0rld/wails-issue-3686

You can see the minimal changes I added to trigger it in this commit: makew0rld/wails-issue-3686@6cbbfa9

[leaanthony]

I'd love to know if others are seeing the same thing. Seems like something that would be mentioned on Discord.

[Vovan-VE]

similar/related #3563

[makew0rld]

According to a user on Discord (message) this replacing also happens for them, but can be prevented with preventDefault in JavaScript.

I will try this, but even if it works, it would be nice if Wails could automatically set that up once drag and drop is enabled. In my project I only have a need for a backend drop handler in Go, so if Wails did this automatically it would prevent me from having to add a JavaScript handler as well. It would also make behaviours match across platforms, since I assume WebView doesn't do this or you would have known about it.

[leaanthony]

It would be good if you could try it by editing the runtime.js and seeing if it's possible to prevent by default.

[mrf345]

I ran into this one earlier today, and I went with the JS OnfileDrop, better fit for my use-case.
But think I've managed to fix this by introducing a new event that enables the backend to trigger
the frontend drag and drop event listeners. I've just created a draft PR #3704

Note, you'll need to do runtime.OnFileDrop post dom-ready event, so can't use it in startup,
additionally, will need to add CSSDropProperty to your styles.css :

:root {
    --wails-drop-target: none;
}

[makew0rld]

Finally had a chance to work on this. I can confirm @mrf345's patch in #3704 worked for me. I moved my runtime.OnFileDrop into my OnDomReady callback instead of OnStartup and that was all I needed. Setting --wails-drop-target was not needed.

@leaanthony is #3704 + my testing acceptable to you as fix to this issue?