search

dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.04k stars 1.73k forks source link

BlazorWebView drag and drop does not work with MAUI Templates #2205

Open VegasVault opened 3 years ago

VegasVault commented 3 years ago

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

Screenshots

Reproduction Link

Workaround

Depends on

Eilon commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

Swordancer commented 3 years ago

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.

wierd-bug

Eilon commented 3 years ago

@Swordancer thank you for the extra info.

ghost commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

Eilon commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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

ismasanchez commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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.

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Eilon commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

Thank you @VegasVault I'll take another look.

ismasanchez commented 1 year ago

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

ismasanchez commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

Eilon commented 1 year ago

@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.

Tailslide commented 1 year ago

FWIW I used the dropzone component from mudblazor and the same page works in blazor and doesn't work in MAUI. (Windows not android).

https://mudblazor.com/components/dropzone#api

ismasanchez commented 1 year ago

@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.

Correct, it doesn't work when implemented within a BlazorWebView component in .NET MAUI and run on Windows.

OriginalPato commented 1 year ago

Has there been any further development on this issue?

kristianputman commented 1 year ago

I just ran into this problem today, been attempting to write a drag and drop function into a custom library for about 4 hours now, thinking I was just being stupid every time it didn't work. Do we know when this is likely to be fixed?

Eilon commented 1 year ago

FWIW I used the dropzone component from mudblazor and the same page works in blazor and doesn't work in MAUI. (Windows not android).

https://mudblazor.com/components/dropzone#api

@Tailslide - on Windows this doesn't work due to this issue with WebView2: https://github.com/MicrosoftEdge/WebView2Feedback/issues/2805 (please up-vote if you agree!)

And on Android Chrome web browser it doesn't seem to work at all (just the regular browser, not in a .NET MAUI app or using Blazor).

I'm not saying this is the fault of MudBlazor, but given that the sample doesn't work outside of .NET MAUI on those platforms, I wouldn't expect it to work inside .NET MAUI / Blazor Hybrid either.

Eilon commented 1 year ago

I've spent several more hours on this and I'm afraid I haven't been able to find an example that satisfies this condition:

  1. For Windows: Sample code that works in a regular WinUI app with WebView2 (no Blazor at all), but doesn't work in .NET MAUI Blazor on Windows. The few "almost" cases turned out to be bugs in WebView2 itself, such as https://github.com/MicrosoftEdge/WebView2Feedback/issues/2805
  2. For Android: Sample code that works in Android Chrome (just the regular browser), but doesn't work in .NET MAUI Blazor on Android. I've seen examples that don't work in either, and ones that presumably work in both, but not ones that work in one but not the other.

I'm thankful for the code samples that were posted here but I was unable to find one that satisfies those conditions.

To make further progress on this, I think the best repro would be one where there is a Blazor Web app (either Blazor Server or Blazor WebAssembly) that uses Drag/Drop that works in a regular browser on a given platform, but the same Blazor component doesn't work in a .NET MAUI Blazor Hybrid app on particular platforms, especially Android. We know there's an issue with WebView2 on Windows (https://github.com/MicrosoftEdge/WebView2Feedback/issues/2805 - please up-vote if you agree!), but I don't have enough information (or knowledge) to investigate any potential Android issue.

Tailslide commented 1 year ago

I'm not saying this is the fault of MudBlazor, but given that the sample doesn't work outside of .NET MAUI on those platforms, I wouldn't expect it to work inside .NET MAUI / Blazor Hybrid either.

I'd suggest re-opening issue #9983 to avoid confusion.. just because webview2 is causing things to fail doesn't mean it's no longer an issue and people searching for information will be able to figure out what's going on. Either way thanks for the info. I'm no longer using MAUI but best of luck.

Eilon commented 1 year ago

I'd suggest re-opening issue #9983 to avoid confusion.. just because webview2 is causing things to fail doesn't mean it's no longer an issue and people searching for information will be able to figure out what's going on. Either way thanks for the info. I'm no longer using MAUI but best of luck.

People can still find that issue, but it's closed because there's no action to be taken in this repo.

goensin commented 1 year ago

Has there been any further development on this issue?

goensin commented 1 year ago

I need to use drag & drop but can't find any solution

ismasanchez commented 1 year ago

@goensin if you need implementation for Android, you can use one of the libraries mentioned previously, but for Windows none of those work. It's sad, because they aren't able to fix whatever bug is inside Window's Webview on .NET/MAUI with Blazor, all being Microsoft products.

goensin commented 1 year ago

@goensin if you need implementation for Android, you can use one of the libraries mentioned previously, but for Windows none of those work. It's sad, because they aren't able to fix whatever bug is inside Window's Webview on .NET/MAUI with Blazor, all being Microsoft products.

Thank you. It seems I have to replace it. 😭

QadiymStewart commented 1 year ago

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

@danroth27 Any insights or downside to using this approach until the issue is fixed?

danroth27 commented 1 year ago

@danroth27 Any insights or downside to using this approach until the issue is fixed?

@QadiymStewart Sure, Blazor Hybrid is supported with WPF and WinForms. You won't get the cross-platform benefits of .NET MAUI, but if you only need to target Windows, then that's a valid approach. We're talking with the WebView2 folks to try to get https://github.com/MicrosoftEdge/WebView2Feedback/issues/2805 fixed.

maxibyte commented 1 year ago

Please fix this bug soon. Drag and drop is a core functionality for many applications.

desdae commented 1 year ago

Unfortunately, it still does not work for Windows. The start drag even fires, but then all the UI just freezes with no proper indication that the element is being dragged. Releasing the mouse sometimes unfreezes the UI, but sometimes the whole application just crashes. I am using the default MAUI Blazor template with Net 7.

delphinis commented 1 year ago

I also think drag and drop is an absolute must. For all platforms! If that doesn't work, Maui Blazor might be cancelled.

milklike commented 1 year ago

Hive any alternative methods?

MichaelSchreiber commented 1 year ago

Still no news?

rf-0 commented 1 year ago

We are using Mudblazor Drop Zone and facing the same issue on UWP and Android. Tried creating a custom component and couldn't find a way to make it work either. As others pointed out, this functionality is quite important.