CODEWITHSUNDEEP
blazormudblazor
wtfacoconut
wtfacoconut

Reputation: 366

MudBlazor select dropdown is opening in the top of the page

I'm somewhat new to web development and Blazor/MudBlazor. I'm encountering an issue with MudBlazor's select component's dropdown menu, opening in the top of the page. I've tried moving the component to different pages, but I encounter the same issue each time.

Are there any tips or advice on what I can do here to troubleshoot this issue so that the dropdown opens in the correct location?

enter image description here

(Edit 1 - 12/09/2023): It appears that this issue occurs when <MudThemeProvider> is present. Code that replicates the issue is available here: https://try.mudblazor.com/snippet/QEGnOXPvzKSLNYNB

Upvotes: 2

Views: 1760

Answers (1)

RBee
RBee

Reputation: 4967

The issue you've linked is definitely the right issue for this behaviour however, it is not an issue that is going to be addressed, as the underlying cause of the issue is the incorrect usage of the components.

The popover for all the components are provided by the MudPopoverProvider which is a service that is inside the MudThemeProvider component.

You need to have the MudThemeProvider instantiated separate from all the other components as described in their docs.

@inherits LayoutComponentBase

<MudThemeProvider @bind-IsDarkMode="@_isDarkMode" Theme="_theme" />

<MudContainer Class="d-flex justify-end">
    <MudSwitch @bind-Checked="_isDarkMode" Color="Color.Primary" Class="ma-4" T="bool">Toggle Light/Dark Mode</MudSwitch>
</MudContainer>
<MudGrid Class="cursor-default justify-center align-center">
    <MudItem>
        <MudSelect T="double" Label="Price" Variant="Variant.Outlined" AnchorOrigin="Origin.BottomCenter">
            <MudSelectItem T="double" Value="4.50" />
            <MudSelectItem T="double" Value="4.99" />
            <MudSelectItem T="double" Value="3.60" />
        </MudSelect>
    </MudItem>
</MudGrid>

And the MudBlazor snippet is not working because the REPL environment itself is also a component which is already inside the MudMainContent component. Essentially:-

<MudThemeProvider/> <!-- Instantiated here-->
<MudDialogProvider/>
<MudSnackbarProvider/>

<MudLayout>
    <MudMainContent>
        @Body
        <MudThemeProvider/> <!-- Created again -->
    </MudMainContent>
</MudLayout>

If you check the browser dev console you will see this error.

Unhandled exception rendering component: Duplicate MudPopoverProvider detected. Please ensure there is only one provider, or disable this warning with PopoverOptions.ThrowOnDuplicateProvider.
System.InvalidOperationException: Duplicate MudPopoverProvider detected. Please ensure there is only one provider, or disable this warning with PopoverOptions.ThrowOnDuplicateProvider.

Upvotes: 1

Related Questions