Im unabe to fire a change event on a MudSelect component.

<MudSelect T="string" Label="US States" MultiSelection="true" @bind-SelectedValues="_selectedLevels" @bind-SelectedValues:event="OnLevelChange">

@foreach (var level in levels)
{
    <MudSelectItem T="string" Value="@level.Value">@level.Text</MudSelectItem>
}

private IEnumerable<string> _selectedLevels = new List<string> { "Error", "Warn" };
private async Task OnLevelChange(IEnumerable<string> selectedLevels)
{        
    await loggrid.ReloadServerData();
}

I also tried the @onchange event, but with no luck. I would appreciate any help.

Im unabe to fire a change event on a MudSelect component.

<MudSelect T="string" Label="US States" MultiSelection="true" @bind-SelectedValues="_selectedLevels" @bind-SelectedValues:event="OnLevelChange">

@foreach (var level in levels)
{
    <MudSelectItem T="string" Value="@level.Value">@level.Text</MudSelectItem>
}

private IEnumerable<string> _selectedLevels = new List<string> { "Error", "Warn" };
private async Task OnLevelChange(IEnumerable<string> selectedLevels)
{        
    await loggrid.ReloadServerData();
}

I also tried the @onchange event, but with no luck. I would appreciate any help.

• asp-core
• blazor
• mudblazor

1 Answer 1

"@bind-xxx" means two-way binding. @bind-xxx:eventis used like @bind-xx:event="onchange" or @bind-xxx:event="oninput" to infer the binding is triggered when input or "textbox lose focus".
You should use @bind-SelectedValues:after instead

<MudSelect T="string" Label="US States" MultiSelection="true" @bind-SelectedValues="_selectedLevels" @bind-SelectedValues:after="()=>{OnLevelChange(_selectedLevels);}">

Or you could use MudBlazor built-in one-way bind to trigger the event and bind selectedValues manually.

<MudSelect T="string" Label="US States" MultiSelection="true"  SelectedValues="_selectedLevels" SelectedValuesChanged="OnLevelChange" >
...
    private async Task OnLevelChange(IEnumerable<string> selectedLevels)
    {
        _selectedLevels = selectedLevels;
    }