Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

MudBlazor MudSelect incorrectly displays first item in list instead of selected values when primary selection is made

$
0
0

I'm working on a Blazor application using MudBlazor, and I'm encountering an issue with a MudSelect component used for selecting secondary muscle groups. The problem occurs when a primary muscle group is selected in a separate component.

Here's the scenario:

I have two MudSelect components: one for selecting a primary muscle group and another for selecting multiple secondary muscle groups.When no primary muscle group is selected, the secondary MudSelect works correctly, displaying all selected values as a comma-separated string when the dropdown is closed.

However, when a primary muscle group is selected, the secondary MudSelect's display (when closed) always shows the first item in the list(IE "Shoulders"), regardless of which secondary muscle groups are actually selected.If I open the secondary MudSelect dropdown, I can see that the correct items are selected; the issue is only with the display when the dropdown is closed.

Here's a simplified version of my MudSelect for secondary muscle groups:

<MudSelect T="MuscleGroups" Label="Secondary Muscle Groups" MultiSelection="true"           @bind-SelectedValues="SecondaryMuscleGroups"           Variant="Variant.Outlined">    @foreach (var muscleGroup in AvailableSecondaryMuscleGroups)    {<MudSelectItem Value="@muscleGroup">@muscleGroup.ToString()</MudSelectItem>    }</MudSelect>

Any insights or solutions would be greatly appreciated!

Working sample of problem at TryMudblazor:https://try.mudblazor.com/snippet/wYmeOivrMYvMBnYf

I have debated with both ChatGTP, Claude and Github copilot but always end up going down a rabbit hole that leads to complex code that don't solve the problem..


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>