MudComboBox item cannot selected properly with changing list of items

[spajce]

trafficstars

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:

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

[hubert17]

Happens to me as well.

[mckaragoz]

These are relatively hard issues. Do you have sample and basic example code?

[spajce]

These are relatively hard issues. Do you have sample and basic example code?

I hope you can update the MudExtensions at https://trymudextensions.pages.dev/ so we can run some tests. If that's not possible, I’ll upload an example code using the latest versions instead.

[spajce]

Sorry I did accidentally close the issue. kindly please reopen it

[spajce]

Hi @mckaragoz , Here's the sample code. However, I noticed that with the latest version of the extension, the MudComboBox no longer lists the two items - I mean only one item was listed when changes from inputs. I believe the issue is still the same.

https://drive.google.com/file/d/1-SoxdtKTU5SRzzh81flu8S0NsTEDsZKk/view?usp=sharing

[mckaragoz]

I hope you can update the MudExtensions at https://trymudextensions.pages.dev/ so we can run some tests. If that's not possible, I’ll upload an example code using the latest versions instead.

Try extensions is updated you can try something there.

[spajce]

I hope you can update the MudExtensions at https://trymudextensions.pages.dev/ so we can run some tests. If that's not possible, I’ll upload an example code using the latest versions instead.

Try extensions is updated you can try something there.

Thanks! but the issue still the same with my sample code above.

[desigennaro]

I am also experiencing this issue. Has there been any updates on this?