Blazor Dropdown does not keep bound value when options change - drop-down-menu

Question

I have the below code in a new Blazor Server project, just a single page with this on.
#page "/"
#using BlazorApp1.Data;
<select #bind="selectedValue1">
#foreach (DropdownOption option in notValue(0))
{
<option value="#option.value" aria-label="#option"> #option.displayName </option>
}
</select>
<select #bind="selectedValue2">
#foreach (DropdownOption option in notValue(1))
{
<option value="#option.value" aria-label="#option"> #option.displayName </option>
}
</select>
<select #bind="selectedValue3">
#foreach (DropdownOption option in notValue(2))
{
<option value="#option.value" aria-label="#option"> #option.displayName </option>
}
</select>
#code {
List<DropdownOption> test = new List<DropdownOption>()
{
new("BOB", "BOB"),
new("GEOFF", "GEOFF"),
new("GREGROY", "GREGORY"),
new("GERTRUDE", "GERTRUDE"),
new("NameyMcNameFace", "NameyMcNameFace"),
new("GILES", "GILES")
};
List<DropdownOption> notValue(int index) => GetValues(index);
string selectedValue1;
string selectedValue2;
string selectedValue3;
private List<DropdownOption> GetValues(int index)
{
var selected = new List<string>() { selectedValue1, selectedValue2, selectedValue3 };
selected = selected.Select((x, i) => i == index ? "" : x).ToList();
return test.Where(x => !selected.Contains(x.value)).ToList();
}
//public readonly record struct DropdownOption(string value, string displayName, string? group = null)
//{
//}
}
The commented out bit of code is a helper to manage dropdowns and keep it type safe and is simply in another file.
Behaviour happens if you the following steps.
Select dropdowns to
Bob
Gertrude
Giles
Then change the third dropdown from Giles to Geoff and the second dropdown changes value even though it is bound and Gertrude is still an option in the second dropdown.
Is anyone able to explain this behaviour?
Scrrenshot showing behaviour (do not change second dropdown)
See how second dropdown value chnges without being changes manually and it still binds to correct string in backend

Answer 1

Your problem is in the way you are using indexes. Take the first select. You select a value say Gregory - that's index 2 in the list provided. You then select Geoff in the second select. The first select hasn't changed, so it doesn't update, yet you've removed index 1 from it's list. Gregory is now at index 1, but the select thinks the selected item is index 2. You'll find the underlying value is correct, but not the displayed value.
Your second problem is that by default Bob is selected, but the underlying value isn't set. You need to use something like the construct I show in the component to show an unselectable message.
Hope you don't mind, but I've taken the liberty to redesign what you have to iron out these issues.
First a component for your select to encapsulate the functionality. I've added a -- Select a Person -- option that only shows when nothing is selected.
<select class="form-select mb-3" value="#Value" #onchange="(e) => SetValue(e, this.Index)">
#if (this.Selected is null)
{
<option value="" selected disabled aria-label="not selected"> -- Select a Person -- </option>
}
#foreach (DropdownOption option in Items )
{
<option #key="option" value="#option.displayName" aria-label="#option.displayName"> #option.displayName </option>
}
</select>
#code {
private string? Value => Selected?.displayName ?? null;
[Parameter,EditorRequired] public DropdownOption? Selected { get; set; }
[Parameter, EditorRequired] public int Index { get; set; }
[Parameter, EditorRequired] public EventCallback<Tuple<string?, int>> ValueChanged { get; set; }
[Parameter, EditorRequired] public IEnumerable<DropdownOption> Items { get; set; } = Enumerable.Empty<DropdownOption>();
private Task SetValue(ChangeEventArgs e, int index)
{
var value = e.Value?.ToString() ?? null;
this.ValueChanged.InvokeAsync(new Tuple<string?, int>(value, index));
return Task.CompletedTask;
}
}
And then your page:
#page "/"
<MySelect Index="1" Selected="selectedValue1" Items="GetValues(1)" ValueChanged="this.OnValueChanged" />
<MySelect Index="2" Selected="selectedValue2" Items="GetValues(2)" ValueChanged="this.OnValueChanged" />
<MySelect Index="3" Selected="selectedValue3" Items="GetValues(3)" ValueChanged="this.OnValueChanged" />
#code {
private DropdownOption? selectedValue1;
private DropdownOption? selectedValue2;
private DropdownOption? selectedValue3;
private void OnValueChanged(Tuple<string?, int> tuple)
{
var value = tuple.Item1;
var index = tuple.Item2;
if (value is null)
return;
if (index == 1)
selectedValue1 = test.SingleOrDefault(item => item.displayName.Equals(value));
if (index == 2)
selectedValue2 = test.SingleOrDefault(item => item.displayName.Equals(value));
if (index == 3)
selectedValue3 = test.SingleOrDefault(item => item.displayName.Equals(value));
}
private IEnumerable<DropdownOption> GetValues(int index)
{
var selected = new List<DropdownOption>();
if (selectedValue1 is not null && index != 1)
selected.Add((DropdownOption)selectedValue1);
if (selectedValue2 is not null && index != 2)
selected.Add((DropdownOption)selectedValue2);
if (selectedValue3 is not null && index != 3)
selected.Add((DropdownOption)selectedValue3);
return test.Except(selected);
}
private List<DropdownOption> test = new List<DropdownOption>()
{
new("BOB", "BOB"),
new("GEOFF", "GEOFF"),
new("GREGROY", "GREGORY"),
new("GERTRUDE", "GERTRUDE"),
new("NameyMcNameFace", "NameyMcNameFace"),
new("GILES", "GILES")
};
}