MudBlazor / MudBlazor

Blazor Component Library based on Material design with an emphasis on ease of use. Mainly written in C# with Javascript kept to a bare minimum it empowers .NET developers to easily debug it if needed.
http://mudblazor.com
MIT License
7.22k stars 1.18k forks source link

Selective components do not open (MudSelect, MudMenu, MudDatePicker, etc.) #8791

Closed andreaswto closed 3 weeks ago

andreaswto commented 3 weeks ago

Bug type

Component

Component name

MudSelect, MudMenu, MudDatePicker and more

What happened?

In my Blazor application (.NET 8) the selective menu components do not open. For example MudSelect as in the example below. When clicking on the component there is no reaction. It works without any problems in TryMudBlazor.

<MudItem sm="3"> <MudStack AlignItems="AlignItems.Center"> <MudSelect T="String" Label="My selection" Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter" Margin="Margin.Dense"> <MudSelectItem Value="@("Selection 1")" /> <MudSelectItem Value="@("Selection 2")" /> <MudSelectItem Value="@("Selection 3")" /> <MudSelectItem Value="@("Selection 4")" /> </MudSelect> </MudStack> </MudItem>

I have noticed this faulty behaviour with the following components so far:

I have already added the two lines in the App.razor file: <head> <HeadOutlet @rendermode="RenderMode.InteractiveServer" /> </head>

and

<body> <Routes @rendermode="RenderMode.InteractiveServer" /> </body>

Does anyone have a workaround for this problem? The problem should also be fixed, as it has existed for some time.

Expected behavior

I expect behaviour like in the MudBlazor documentary. The MudSelect component should open and display the defined elements. After selection, the value should be updated.

See here: MudSelect in MudBlazor Doc

I think the behaviour is clear.

Reproduction link

https://try.mudblazor.com/snippet/wEmeOocnSUpqVAwV

Reproduction steps

  1. Create Blazor projekt with .NET 8
  2. Set MudSelect with MudSelectItem components
  3. Try to open Select component

Relevant log output

No response

Version (bug)

6.19.1

Version (working)

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Edge

On which operating systems are you experiencing the issue?

Windows

Pull Request

Code of Conduct

Anu6is commented 3 weeks ago

You are most likely missing something in your setup. Since you've stated that you added the render modes globally, the next possible issues is missing the mud providers in your main layout.

andreaswto commented 3 weeks ago

@Anu6is Yes, I have declared the two lines <MudThemeProvider/> and <MudDialogProvider/> in the MainLayout.razor.

Anu6is commented 3 weeks ago

Can you share a repo link reproducing the issue?

andreaswto commented 3 weeks ago

@Anu6is I have tried to create a separate project and reproduce the problem. However, the component works there without any problems. Unfortunately, I cannot publish my code.

I have now found out that the source of the problem is with my costum ThemeProvider. It is structured like this:

<CascadingValue Value=false Name="UsePopoverProvider"> <MudThemeProvider Theme="MyTheme" IsDarkMode="true"></MudThemeProvider> </CascadingValue>

@code { public static MudTheme MyTheme => new() { PaletteDark = new PaletteDark() { Primary = "#e30613", AppbarBackground = "#1a1e21", Background = "#1a1e21", TextPrimary = "#e2e2e2", Secondary = "#039136", Black = "#151521", Dark = "#151521", Tertiary = "#95a5a6", }, Typography = new Typography() { Default = new Default() { FontFamily = new[] { "Roboto", "Verdana", "Geneva"} }, Button = new Button() { TextTransform = "None", FontSize = "0.85rem" } } }; }

I have the following references in the MainLayout:

<MyMudThemeProvider /> (is like the name of the class) <MudDialogProvider /> <MudSnackbarProvider />

If I reference the standard <MudThemeProvider/>, the components work. Do you have any idea what is wrong here?

Anu6is commented 3 weeks ago

<CascadingValue Value=false Name="UsePopoverProvider"> -- this is your problem.

Why are you setting UsePopoverProvider to false? You should only need that if you are already registering a PopoverProvider somewhere else in your code. It's usually registered within the MudThemeProvider, but your telling the MudThemeProvider to not register it.

Also, if that's all your class does, there is no real need to make your own class, you just need to define your custom MudTheme and do <MudThemeProvider Theme="MyTheme" IsDarkMode="true"/>

andreaswto commented 3 weeks ago

@Anu6is This was probably a copy paste error on my part. I have removed this and now it works without any problems. Many thanks for your support.