CodeBeam.MudBlazor.Extensions
CodeBeam.MudBlazor.Extensions copied to clipboard
MudComboBox item cannot selected properly with changing list of items
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();
}
}