BlazorWebView drag and drop does not work with MAUI Templates

[VegasVault]

trafficstars

Description

When using MAUI with blazor template add a draggable component. Long press will recognize you are attempting to drag but no functionality is present.

Steps to Reproduce

1. Create .NET MAUI Blazor App
2. Create a draggable element and a dropzone
3. Attempt to drag the draggable object to the dropzone

Expected Behavior

It should allow you to drag an element as it does on a browser.

Actual Behavior

OnDragStart fires but no actual functionality is present.

Basic Information

• Version with issue: Preview 6 and 7

• Last known good version: None

• IDE: Visual Studio 2022 Preview 3.1

• Platform Target Frameworks:

  • iOS: Untested
  • Android: Android 11 API 30 local device and Android 9 API 28 emulated
  • UWP: Untested

• Nuget Packages:

• Affected Devices: Physical and emulated

Screenshots

Reproduction Link

Workaround

Depends on

• [x] https://github.com/MicrosoftEdge/WebView2Feedback/issues/2805
• [x] https://github.com/microsoft/microsoft-ui-xaml/issues/7366 (milestone 1.5)

[Eilon]

Hi @VegasVault , can you share more info about how you Create a draggable element and a dropzone? Did you write code yourself, is it a 3rd party component, or something else?

[VegasVault]

Code was just a test snippet I wrote using standard blazor with no 3rd party libraries. Works in chrome but once published as a MAUI app it would only fire the drag start. Simple code example below.

<ul>
    <li draggable="true" id="source"  @ondragstart="OnDragStart" style="background-color:blue;color:white;width:50px;height:50px;">drag me</li>
</ul>

<div dropzone="move" id="target" @ondrop="OnDrop" ondragover="event.preventDefault();" style="background-color:green;color:white;width:200px;height:200px;">
    and drop me here
</div>
<div>@DragState</div>

@code {
    public string DragState = "No drag";
    public void OnDragStart(DragEventArgs dragEventArgs)
    {
        DragState = "drag started";
    }
    public void OnDrop(DragEventArgs dragEventArgs)
    {
        DragState = "item dropped";
    }
}

[Eilon]

Thanks @VegasVault , I was able to repro this exactly in Android, and also saw some other odd behavior in Windows/WinUI/WebView2 where the drag does start, but it's extremely slow (unusable), and the drop doesn't seem to work. We'll have to dig a bit deeper into this.

[Eilon]

Interestingly, it works fine in WPF and WinForms with WebView2. I can drag and drop and everything works as expected.

[Swordancer]

OnDrag is not triggering at all. Also when Im trying to drag draggable element, leave the area of the maui app (latest preview, Windows 11), then move cursor over Microsoft Edge I can see the element Im dragging, but I can't see it in the app. It follows the cursor inside Microsoft Edge and then the app just crashes. When it crashes element is where the cursor was during crash. It stays there like on the picture but now not only in the Microsoft Edge but everywhere like it's burned into the screen.

It looks like some serious bug.

[Eilon]

@Swordancer thank you for the extra info.

[ghost]

We've moved this issue to the Future milestone. This means that it is not going to be worked on for the coming release. We will reassess the issue following the current release and consider this item at that time.

[MSqrl]

Issue persists with DropZones, at least in net6.0 Windows version of Blazor App.

Microsoft Visual Studio Community 2022 Version 17.4.0 Preview 1.0 VisualStudio.17.Preview/17.4.0-pre.1.0+32804.182 Microsoft .NET Framework Version 4.8.04161

Is there any known work around?

[Eilon]

Hi, this appears to be an issue with WebView2 running on WinUI, so I logged a new bug for that here: https://github.com/MicrosoftEdge/WebView2Feedback/issues/2805. Please up-vote to help raise awareness of the issue. I'm closing this issue here as there is no further action required in the .NET MAUI repo. Thanks!

[VegasVault]

@Eilon has the original issue of Blazor for android drag and drop been fixed in .net 7?

[Eilon]

Oops, I forgot that this issue is specifically about Android. The other issue I linked is Windows-specific. We'll keep this one open for investigation. Sorry about the confusion!

[ismasanchez]

This bug affects any app that needs drag and drop capabilities, it is really important for many apps, any plans on when is going to be fixed?

[Tailslide]

I just ran into this on .NET 7 too.. drag and drop being broken with no workaround is a pretty major issue.

[ismasanchez]

@Tailslide There's a workaround but it requires a huge effort, as you could use MAUI (not Blazor) drag and drop capabilities. With MAUI Blazor hybrid you can mix and match these two technologies, but your app architecture gets much more complicated. https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/gestures/drag-and-drop?view=net-maui-7.0 Hope they can fix this bug asap!

[Tailslide]

There's a workaround

I don’t think this works in most cases since my existing project uses blazor controls.. I would love to be wrong about that though. I wound up switching to browser based blazor.

[Eilon]

In theory drag & drop should work within the BlazorWebView, but there appear to be some bugs related to this. You could certainly try to use .NET MAUI's native drag & drop, but that would be separate code that is MAUI-specific. If you have existing Blazor components that already do drag & drop, you should be able to use that code as-is.

[Tailslide]

@Eilon Thanks for the tip I wasn't aware of BlazorWebView.. it reminds me of back in the day loading a browser inside an activeX control. I think the best solution for me is to carry on with blazor and hope for a bugfix later on down the road. Looks like maybe in a pinch I could publish it as a windows service:

https://github.com/dotnet/aspnetcore/issues/16635

[Eilon]

Hi everyone, I've been taking another look at this issue and so far I have not been able to find any drag & drop web/HTML/JS sample that works on Android at all.

• With the original code here I get the drag to start but then nothing else works.
• When I modify the code here to still use BlazorWebView but do all the drag & drop using pure HTML/JS, it behaves just like the Blazor version: the drag starts, but then nothing else works.
• I tried this HTML drag & drop sample and it doesn't work in Chrome in Android Emulator: https://park.glitch.me/ (when I hold down on a car image, it gives me image options like save/copy/etc.)
• Then I tried another HTML drag & drop sample with similar results in Chrome: https://mdn.github.io/dom-examples/drag-and-drop/copy-move-DataTransfer.html (I can start the drag, but the rest of the operation never works as expected. Sometimes I can't even drag the top box. And when I can drag it, the drop operation doesn't seem to work either at all or almost never.)

So.... I'm wondering how well drag & drop works in Android Chrome and/or Android WebView in general. Without a repro that satisfies that case, I don't think there's any further work to track in this item (that is, there might be an issue, but it's more likely an issue in Android WebView, Chrome, or Chromium).

Does anyone have an example that does work in Android Chrome or a regular Android WebView, yet doesn't work in a .NET MAUI BlazorWebView on Android? If so, can you post the exact HTML you're using, and ideally have a demo of it running live (perhaps on JSFiddle, or using GitHub pages, just like the MDN example I linked to)?

Thanks, Eilon

[ghost]

Hi @VegasVault. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[VegasVault]

Thanks @VegasVault , I was able to repro this exactly in Android, and also saw some other odd behavior in Windows/WinUI/WebView2 where the drag does start, but it's extremely slow (unusable), and the drop doesn't seem to work. We'll have to dig a bit deeper into this.

Seems this was reproduced a year and a half ago from the snippet that I posted 🤔

MS can close the issue but this seems this will keep resurfacing as drag and drop seems pretty essential for mobile.

[ismasanchez]

@VegasVault I totally agree, such a big bug makes this development framework (Maui + Blazor) not reliable for now.

[Eilon]

Regarding this:

Thanks @VegasVault , I was able to repro this exactly in Android, and also saw some other odd behavior in Windows/WinUI/WebView2 where the drag does start, but it's extremely slow (unusable), and the drop doesn't seem to work. We'll have to dig a bit deeper into this.

Seems this was reproduced a year and a half ago from the snippet that I posted 🤔

MS can close the issue but this seems this will keep resurfacing as drag and drop seems pretty essential for mobile.

And this:

@VegasVault I totally agree, such a big bug makes this development framework (Maui + Blazor) not reliable for now.

My concern is that there is either an issue with the Android WebView itself, in which case we need to send a bug report to Google/Chromium, or there is some issue with how people are using the JavaScript/DOM/browser drag/drop APIs. In my experience, I couldn't get any reliable drag/drop behavior anywhere in any Android web/HTML/browser experience. If that's the case, there's nothing we can do in .NET MAUI or Blazor if the underlying issue is in a different component.

[ghost]

Hi @VegasVault. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[VegasVault]

@Eilon

https://codepen.io/miclgael/pen/JqWJma

Here is a working example that functioned fine on my android using the brave browser(chromium based).

[Eilon]

Thank you @VegasVault I'll take another look.

[ismasanchez]

Hi, after small research I've been able to find out the following things:

• Vanilla drag-and-drop implementation does not work in Android as stated here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drag_event

• Some drag-and-drop implementations work, some others don't (I haven't research why)

• This library works in Android Webview native and I have been able to successfully implemented for Maui/Blazor for Android (in Windows still does not work): https://github.com/SortableJS/Sortable

• Example of that library in web that also works when implemented within an Android Webview: https://www.cssscript.com/demo/drag-drop-sortablejs/

[ismasanchez]

Here's another library that I have been able to successfully implement in Maui/Blazor for Android: https://github.com/ThibaultJanBeyer/DragSelect

Example: https://www.cssscript.com/demo/draggable-selectable/

When the implementation works in Android Webview (or any chromium based browser) it works for Maui/Blazor

[Eilon]

@ismasanchez thank you for all this info! Perhaps at a minimum we could write up some of this as guidance for Blazor Hybrid developers. I'll have to look into it some more, but I feel like we'll end up determining that there's nothing we can do in Blazor Hybrid itself and it's just an Android WebView limitation.

[ismasanchez]

@Eilon None of those implementations mentioned before work on Windows, any thoughts on that?

[Eilon]

@Eilon None of those implementations mentioned before work on Windows, any thoughts on that?

Hmm I just tried the ones you linked running Edge on Win11 and they worked. Do they specifically not work in WeView in .NET MAUI? If so I'll have to take a look.