asp.net-coreblazormudblazor

MudSelect change event is not firing


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.


Solution

  • "@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;
        }