CODEWITHSUNDEEP
htmlcssblazorblazor-server-sidemudblazor
DaGa
DaGa

Reputation: 73

Mudblazor Select "broken" on Popover

I have a MudSelect on a MudPopover but I encounter a somewhat weird behavior when using the select. The select dropdown will not appear over everything else as it should, but instead, it will be layered behind /underneath other components and is unclickable. The confusing thing about this is that a simple reload (when opening the page) fixes the issue. Does somebody know what triggers the "broken" behavior and how it is then fixed by reloading? Or does somebody know how to fix it without forcing a reload upon entering the page?

when it is broken
how it should normally look

<MudPopover Open="@_open" RelativeWidth="true" Fixed="true">
    <div class="d-flex flex-column">
        <EditForm Model="@items" Context="itemUpload">
            <MudSelect @bind-Value="selectedH" Margin="Margin.Dense" Variant="Variant.Outlined" Label="whatever" AnchorOrigin="Origin.BottomCenter">
                @foreach (var item in items)
                {
                    <MudSelectItem Value="@item.id">@item.name</MudSelectItem>
                }
            </MudSelect>
        </EditForm>
        <MudButton Disabled="@uploading" OnClick="Upload" Variant="Variant.Filled" Color="Color.Primary">
            @if (uploading)
            {
                <MudProgressCircular Class="ms-n1" Size="Size.Small" Indeterminate="true"/>
                <MudText Class="ms-2">Processing</MudText>
            }
            else
            {
                <MudText>Upload</MudText>
            }
        </MudButton>
        <MudButton OnClick="@ToggleOpen" Class="ml-auto mr-n3 mb-1" Color="Color.Error">Schlie&szlig;en</MudButton>
    </div>
</MudPopover>

Upvotes: 5

Views: 3184

Answers (2)

burton
burton

Reputation: 591

fwiw, this also affects the MudAutocomplete when hosted in a popover (not just MudPopover).

unfortunately, it would be a significant rework to get rid of popover in my project ;(

Upvotes: 0

MrWuf
MrWuf

Reputation: 1498

@InCo placed this in the comments, but it appears to be the best solution I have seen, so I pulled this out into an answer. Instead of using MudPopover, use MudDialog. It solves the Z-Index issue for MudSelect as well as MudDatePicker

Upvotes: 0

Related Questions