CodeBeamOrg / CodeBeam.MudBlazor.Extensions

Useful third party extension components for MudBlazor, from the contributors.

Home Page:https://mudextensions.codebeam.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

MudComboBox item cannot selected properly with changing list of items

spajce opened this issue · comments

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();
   }
}