Blazor Drag and Drop broke between .NET Core 3.0 and .NET 6.0

Question

I followed Chris Saintys demo for drag and drop which was very clever. The source can be downloaded from his git. I added the polyfill to make the example work on mobile.

<script id="DragDropTouch" src="https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js"></script>

I use Conveyor to debug drag and drop on mobile and everything works great (Safari and Chrome on IOS mobile ). Unfortunately if I upgrade the demo to .NET 6.0 from .NET Core 3.0 the @ondragstart and @ondrop no longer fire on the mobile. It's odd that even though on mobile the events are ignored on blazor, they are still raised by javascript. Therefore the polyfill is still working.

For example on mobile while the following javascript dragstart is firing;

document.addEventListener('dragstart', function(ev) {
    if (ev.target.classList.contains('draggable')) {
        console.log('dragging');
    } else {
        console.log('ignoring draggable');
    }
});

The following blaor dragstart is being ignored;

<li class="draggable" draggable="true" title="@JobModel.Description" @ondragstart="@(() => HandleDragStart(JobModel))" >
    <p class="description">@JobModel.Description</p>
    <p class="last-updated"><small>Last Updated</small> @JobModel.LastUpdated.ToString("HH:mm.ss tt")</p>
</li>

@code {
    [CascadingParameter] JobsContainer Container { get; set; }
    [Parameter] public JobModel JobModel { get; set; }

    private void HandleDragStart(JobModel selectedJob)
    {
        Container.Payload = selectedJob;
    }
}

What could be causing this behavior by upgrading .NET versions?

Note that everything works perfectly fine on desktop versions in both .NET 6.0 and .NET Core 3.0.

EDIT: I've added some repositories to demonstrate this issue.

Answer 1

It was the polyfill. Fix for .NET 6.0 can be found here: #41394 (comment)