BlazorWebView drag and drop does not work with MAUI Templates

[VegasVault]

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

• JavaScript drag/drop events not working in WinUI specifically (WPF is fine) MicrosoftEdge/WebView2Feedback#2805
• Cannot drop files from Explorer into WebView2 in a WinUI3 app microsoft/microsoft-ui-xaml#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.

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.