microsoft / microsoft/microsoft-ui-xaml
Broken drag and drop within and out of WebView2
- Dominant language
- C++
- Stars
- 8.4k
- Forks
- 942
- Avg merge
- 2d 7h
- Merged PRs (30d)
- 105
Description
Drag and drop within, and out of WinUI WebView2 controls is broken.\
See attached video!\
This affects WinUI, and thus also .NET MAUI and UWP projects.
> [!IMPORTANT]
> **If you are affected, Ivan Kara's (ivanjx) [JS polyfill](https://gist.github.com/ivanjx/b026ba331796e20a717778ae56760e3c) could be a temporary fix.**\
> This does not work in all cases, e.g. mine.
## Reproduction and Comparison
This issue only appears in WinUI.
You can confirm this by comparing WinForms, WPF and WinUI, with a WebView2 control and [this drag and drop test page](https://codepen.io/erithax/full/EajYQor) (or you can locally serve the following HTML):
drag and drop HTML test page
section {
border:1px solid gray;
display:flex;
align-items:center
}
i {
color: gray;
}
.bounder {
display: inline-block;
width: 100px;
height: 30px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
function withinDragStartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function withinDragOverHandler(ev) {
ev.preventDefault();
}
function withinDropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
drag me
⇄
function intoDropHandler(ev) {
ev.preventDefault(); // Prevent file from being opened
const showDropped = document.getElementById("showDropped");
showDropped.innerHTML = "";
const addFile = (file) => showDropped.innerHTML += file + " ";
const files = [];
if (ev.dataTransfer.items) {
[...ev.dataTransfer.items]
.filter(item => item.kind === "file")
.forEach((item, i) => addFile(item.getAsFile().name));
} else if (ev.dataTransfer.files) {
[...ev.dataTransfer.files]
.forEach((file, i) => addFile(file));
}
}
function intoDragOverHandler(ev) {
ev.preventDefault(); // Prevent file from being opened
}
Drag file into
Drag image out
- WinForms: follow the [get started guide](https://learn.microsoft.com/en-us/microsoft-edge/webview2/get-started/winforms) up to and including step 6.
- WPF: follow the [get started guide](https://learn.microsoft.com/en-us/microsoft-edge/webview2/get-started/wpf) up to and including step 5.
- WinUI: follow [get started guide](https://learn.microsoft.com/en-us/microsoft-edge/webview2/get-started/winui) up to and including step 6.
Set ``!
Try dragging inside the webview and dragging image from inside to outside webview.\
See video below!
## Related
In https://github.com/microsoft/microsoft-ui-xaml/issues/7366, which was closed without a solution, @codendone says
> Dragging out of a WebView2 (or even within a WebView2, if that drag uses drag-n-drop) is still not fixed and got moved to 1.6. Fixing dragging out requires work both in core WebView2 and the XAML element. That work is still in progress.
hence this tracking issue.
This is clearly a pervasive issue which is causing issues to pop up on repositories all across the stack.
There are more drag and drop issues that are potentially related to this,
but these are the ones I deemed likely to be about the same issue.
#### Microsoft
- https://github.com/MicrosoftEdge/WebView2Feedback/issues/2805 40👍
Closed as not planned?!
- https://github.com/MicrosoftEdge/WebView2Feedback/discussions/3973
- https://github.com/microsoft/microsoft-ui-xaml/issues/7366 7👍
- https://github.com/MicrosoftEdge/WebView2Feedback/issues/2826
- https://github.com/MicrosoftEdge/WebView2Feedback/issues/5237
- https://github.com/dotnet/maui/issues/2205 18👍
- https://github.com/dotnet/maui/issues/10701
- https://github.com/dotnet/maui/issues/7390
- https://github.com/microsoft/microsoft-ui-xaml/issues/10142
- https://github.com/microsoft/microsoft-ui-xaml/issues/9187 6👍
#### External
- https://github.com/Postlagerkarte/blazor-dragdrop/issues/152
- https://www.reddit.com/r/dotnetMAUI/comments/10sk5kr/im_considering_giving_up_on_maui_blazor_hybrid/
- https://stackoverflow.com/questions/73197778/net-maui-blazor-app-drag-and-drop-impossible
- https://github.com/DennisvHest/MapMaven/issues/122
- https://github.com/MudBlazor/MudBlazor/issues/8227
## Media
https://github.com/user-attachments/assets/a7f5d69d-9fc7-4ff6-be4f-04b99a713453
---
- NuGet package version: WinUI 3 - Windows App SDK 1.7.2: 1.7.250513003
- Windows version: Windows 11 (24H2): Build 26100
- Additional contect: _No response
Contributor guide
Research direction
Start by reproducing the issue with the WinUI WebView2 control and the linked drag-and-drop test page, then compare the WinForms, WPF, and WinUI get-started examples. Read the related microsoft-ui-xaml and WebView2 issues to understand the ongoing work across the XAML element and WebView2. Done means drag-and-drop works within the control, into it, and from it to the file explorer.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp
- Domain
- desktop
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100