CodeBeamOrg / CodeBeam.MudBlazor.Extensions

Useful third party extension components for MudBlazor, from the contributors.
https://mudextensions.codebeam.org/
MIT License
367 stars 62 forks source link

MudComboBox item cannot selected properly with changing list of items #415

Open spajce opened 1 week ago

spajce commented 1 week ago

When using MudComboBox, there is an issue where items cannot be selected properly if the user wants to change the selected item from a dynamically updated list. This issue occurs in scenarios the items in the MudComboBox are modified based on new values entered by the user.

Demo: 06-17-2024-opera_L2unZ3jl07

The MudComboBox is defined as follows:

<MudStack>
    <MudTextField T="string" @bind-Value="FirstName" Label="First Name" Variant="Variant.Filled" Required="true"
                  Class="to-upper" TextChanged="FirstNameChanged" Immediate="true" />
    <MudTextField T="string" @bind-Value="LastName" Label="Last Name" Variant="Variant.Filled" Required="true"
                  Class="to-upper" TextChanged="LastNameChanged" Immediate="true" />
    <MudTextField T="string" @bind-Value="MiddleName" Label="Middle Name" Variant="Variant.Filled"
                  Class="to-upper" TextChanged="MiddleNameChanged" Immediate="true" />
    <MudComboBox @bind-Value="FileAs" Label="File As" Variant="Variant.Filled" Editable="true" MultiSelection="false" Autocomplete="new-password"
                 Strict="false" DisableFilter="true">

        @foreach (var state in ListFileAs)
        {
            <MudComboBoxItem Value="@state" Text="@state">@state</MudComboBoxItem>
        }
    </MudComboBox>
</MudStack>
@code {
    public string FirstName { get; set; } = "";
    public string LastName { get; set; } = "";
    public string MiddleName { get; set; } = "";
    public string FileAs { get; set; } = "";
    private List<string> ListFileAs { get; set; } = new();

    private void FirstNameChanged(string value)
    {
        ListFileAs.Clear();
        string firstName = string.Empty;
        string lastName = string.Empty;
        string lastName1 = string.Empty;
        string middleName = string.Empty;

        if (!string.IsNullOrEmpty(value))
        {
            firstName = $"{value} ";
        }

        if (!string.IsNullOrEmpty(LastName))
        {
            lastName = $"{LastName}, ";
            lastName1 = $" {LastName}";
        }

        if (!string.IsNullOrEmpty(MiddleName))
        {
            middleName = $"{MiddleName[0]}.";
        }

        var format1 = $"{lastName}{firstName}{middleName}".ToUpper();
        var format2 = $"{firstName}{middleName}{lastName1}".ToUpper();

        ListFileAs.Add(format1);
        ListFileAs.Add(format2);
        FileAs = format1;
        StateHasChanged();
    }

    private void LastNameChanged(string value)
    {
        ListFileAs.Clear();
        string firstName = string.Empty;
        string lastName = string.Empty;
        string lastName1 = string.Empty;
        string middleName = string.Empty;

        if (!string.IsNullOrEmpty(FirstName))
        {
            firstName = $"{FirstName} ";
        }

        if (!string.IsNullOrEmpty(value))
        {
            lastName = $"{value}, ";
            lastName1 = $" {value}";
        }

        if (!string.IsNullOrEmpty(MiddleName))
        {
            middleName = $"{MiddleName[0]}.";
        }

        var format1 = $"{lastName}{firstName}{middleName}".ToUpper();
        var format2 = $"{firstName}{middleName}{lastName1}".ToUpper();

        ListFileAs.Add(format1);
        ListFileAs.Add(format2);
        FileAs = format1;
        StateHasChanged();
    }

    private void MiddleNameChanged(string value)
    {
        ListFileAs.Clear();
        string firstName = string.Empty;
        string lastName = string.Empty;
        string lastName1 = string.Empty;
        string middleName = string.Empty;

        if (!string.IsNullOrEmpty(FirstName))
        {
            firstName = $"{FirstName} ";
        }

        if (!string.IsNullOrEmpty(LastName))
        {
            lastName = $"{LastName}, ";
            lastName1 = $" {LastName}";
        }

        if (!string.IsNullOrEmpty(value))
        {
            middleName = $"{value[0]}.";
        }

        var format1 = $"{lastName}{firstName}{middleName}".ToUpper();
        var format2 = $"{firstName}{middleName}{lastName1}".ToUpper();

        ListFileAs.Add(format1);
        ListFileAs.Add(format2);
        FileAs = format1;
        StateHasChanged();
    }
}