Edge Browser Select Bug
Closed this issue · 3 comments
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 ?
Imho you didn't describe what the bug actually is. Can you extend your post with the required information?
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 ?
Can you provide a minimal, reproducible example project on GitHub to demonstrate the issue?