Edge Browser Select Bug

[MaxThom]

Hey,

thank for this, this is amazing. I'm using it to move tiles in my dashboard. I have a wierd behaviour I cant explain. Im also using MudBlazor which is a MaterialUI implementation in Blazor. I'm rendering my own components and here is what happen when I drag:

This happens in Chrome and Edge, but not Firefox. Moreover, if I drag starting on the See Reports button, it is working.

Here is my simple code :

<div class="plk-flex">
    <DropZone Class="d-flex align-items-start flex-wrap" Items="tiles" ItemWrapperClass="@(item => "flex-item")">
        <MudPaper Item="@context" Elevation="@ThemeManager.CurrentTheme.Tile.Elevation" Outlined="@ThemeManager.CurrentTheme.Tile.Outlined" Class=" mr-5 mb-5" Style="@GetPaperStyling()">
            <TileDonutStatus 
                Data=@dataDevices 
                Labels=@labelsDevices 
                Title="@context"  
                Icon="@Icons.Filled.Router"  
                Link="" 
                AllGoodBigText="Everything check ups !" 
                AllGoodSmallText="devices are operational"
                NotGoodBigText="downed devices" 
                NotGoodSmallText="devices are operational" />
        </MudPaper>
    </DropZone>
</div>

@code {
    List<string> tiles2 = new List<string>() { "hello", "apple", "cookie", "gintonic", "assembly", "cocacola" };
    List<string> tiles = new List<string>() { "hello", "apple", "cookie", "gintonic", "assembly", "cocacola" };
    double[] dataDevices = { 12, 2 };
    string[] labelsDevices = { "Operational", "Downed" };

    private string GetPaperStyling()
    {
        return ThemeManager.CurrentTheme.Styling.Blur + ThemeManager.CurrentTheme.Styling.Shadow + ThemeManager.CurrentTheme.Styling.BorderRadius;
    }
}

and my TileDonutClass:

<MudItem Class="d-flex flex-column">
    <MudItem Class="d-flex flex-row align-items-end mx-5 mt-5">
        <MudIcon Icon="@Icon" Size="Size.Large" Color="@getColorStatus()" Class="mr-2" />
        <MudText Typo="Typo.h5" Class="mt-1">@Title</MudText>
    </MudItem> 
    <hr Class="d-flex mx-5 mb-5"/>
    <MudItem Class="d-flex flex-row px-5">
        <MudChart ChartType="@GetChartType()" Width="@GetChartSize()" Height="@GetChartSize()" InputData="@Data" InputLabels="@Labels" LegendPosition="@Position.Left" ChartOptions="@RedGreen"></MudChart>            
        <MudItem Class="d-flex flex-column justify-content-center pt-10 ml-2">
            <MudText Typo="Typo.h6">@getBigText()</MudText>
            <MudText>@getSmallText()</MudText>
        </MudItem>
    </MudItem>
    <MudItem Class="d-flex mt-4">
        <MudButton Class="rounded-b-lg" FullWidth="true" Variant="Variant.Filled" Color="Color.Transparent" DisableElevation="true" EndIcon="@Icons.Material.Filled.Send" Link=@Link>See Reports</MudButton>
    </MudItem>
</MudItem>

Any idea on how to fix this ?

[ViRuSTriNiTy]

Imho you didn't describe what the bug actually is. Can you extend your post with the required information?

[MaxThom]

Sorry if I was unclear. When you look at the picture, you can see it drags the entire rows of items. And not only the selected item. In firefox, it works. I drag one item.

But on chrome/edge, when I start dragging, it select the entire row:

I found that the button make this happen. If i remove it from the component, everything is fine. Any idea ?

[ViRuSTriNiTy]

Can you provide a minimal, reproducible example project on GitHub to demonstrate the issue?