Default value and clear selection of MudSelect

I have two MudSelects, one with type int and one with the type string:

<MudGrid Spacing="2">
            <MudItem xs="12" sm="6" md="3">
                <MudSelect T="int"
                           ValueChanged="ChangeFilterSystem"
                           Label="@(CurrentFilter.SystemIds != null ? "System" : "Loading..")"
                           Variant="Variant.Outlined"
                           Strict="true"
                           Dense="true"
                           OffsetY="true">
                    @if (CurrentFilter.SystemIds != null)
                    {
                        <MudSelectItem T="int" Value="0">All system-ids</MudSelectItem>
                        foreach (var system in CurrentFilter.SystemIds)
                        {
                            <MudSelectItem T="int" Value="@system">@system.ToString()</MudSelectItem>
                        }
                    }
                </MudSelect>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudSelect T="string"
                           ValueChanged="ChangeFilterDepartment"
                           Label="@(CurrentFilter.Departments != null ? "Department" : "Loading..")"
                           Variant="Variant.Outlined"
                           Dense="true"
                           OffsetY="true">
                    @if (CurrentFilter.Departments != null)
                    {
                        <MudSelectItem T="string" Value="@("0")">All departments</MudSelectItem>
                        foreach (var department in CurrentFilter.Departments)
                        {
                            <MudSelectItem T="string" Value="@department">@department</MudSelectItem>
                        }
                    }
                </MudSelect>
            </MudItem>
</MudGrid>

And they are rendered like this:

Questions:

MudSelect with type int takes the default value which I’ve given, “All system-ids”, but why can’t the MudSelect with type string take the default value of “All departments”? Is there a way for MudSelects with type string to be given a default value?
Is there a way to clear the selection? To make it look like nothing is selected. Like in the MudSelect for Department in the attached image.

Best Regards Johan

Issue Analytics

State:
Created 3 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

lindespangcommented, Mar 4, 2021

@johanthorild

Hi!

I understand what you mean, the behaviour is different because the different datatypes. Int works pretty much by accident and string does not because of nullchecks.

I’ve provided an example with your code on how you can do this (skipped some stuff to reproduce easier).

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

Code here if you have issues with the app:

<MudGrid Spacing="2">
            <MudItem xs="12" sm="6" md="3">
                <MudSelect T="int"
                           Label="System"
                           Variant="Variant.Outlined"
                           Strict="true"
                           Dense="true"
                           OffsetY="true" 
                           @bind-Value="@systemId">

                        <MudSelectItem T="int" Value="0">All system-ids</MudSelectItem>
                        <MudSelectItem T="int" Value="1">One</MudSelectItem>
                        <MudSelectItem T="int" Value="2">Two</MudSelectItem>
                        <MudSelectItem T="int" Value="3">Three</MudSelectItem>



                </MudSelect>
            </MudItem>
            <MudItem xs="12" sm="6" md="3">
                <MudSelect T="string"
                           Label="Department"
                           Variant="Variant.Outlined"
                           Dense="true"
                           OffsetY="true"
                           Strict="true"
                           @bind-Value="@department">

                        @foreach(var department in departments)
                        {
                            <MudSelectItem T="string" Value=@department>@department</MudSelectItem>
                        }
                        
                </MudSelect>
            </MudItem>
</MudGrid>


@code{

    private int systemId;
    private string department;

    private int[] systemIds = {0, 1, 2, 3};
    private string[] departments = {"All departments", "Best department", "Mediocre department", "Worst department"};

    protected override void OnInitialized()
    {
        systemId = systemIds[0];
        department = departments[0];
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if(firstRender)
        {
            await Task.Delay(2000);
            systemId = -1;
            department = null;
            StateHasChanged();
        }
    }
}

Thanks for using MudBlazor

EDIT: missed your second question, reset by choosing a value that is not in your value list! See example (I was too lazy to add buttons)

0reactions

johanthorildcommented, Mar 4, 2021