How to set default dropdown value from in Blazor - select

Question

recently i am playing around with blazor-pizza shops tutorial.
I think of something to fix here.
Current:
American bacon is my first selection, after i selected it, the dropdownlist is selecting Artichoke hearts
Outcome I want:
Dropdownlist to reset default selecting "(select)" after i select the American bacon
My code like this:
#inject HttpClient HttpClient
#code {
List<Topping> toppings;
[Parameter] public Pizza Pizza { get; set; }
[Parameter] public EventCallback OnCancel { get; set; }
[Parameter] public EventCallback OnConfirm { get; set; }
protected async override Task OnInitializedAsync()
{
toppings = await HttpClient.GetFromJsonAsync<List<Topping>>("toppings");
}
void ToppingSelected(ChangeEventArgs e)
{
if (int.TryParse((string)e.Value, out var index) && index >= 0)
{
AddTopping(toppings[index]);
toppings.Remove(toppings[index]);
}
}
void AddTopping(Topping topping)
{
if (Pizza.Toppings.Find(pt => pt.Topping == topping) == null)
{
Pizza.Toppings.Add(new PizzaTopping() { Topping = topping });
}
}
void RemoveTopping(Topping topping)
{
Pizza.Toppings.RemoveAll(pt => pt.Topping == topping);
toppings.Add(topping);
toppings = toppings.OrderBy(p=>p.Name).ToList();
}
}
<div class="dialog-container">
<div class="dialog">
<div class="dialog-title">
<h2>#Pizza.Special.Name</h2>
#Pizza.Special.Description
</div>
<form class="dialog-body">
<div>
<label>Size:</label>
<input type="range" min="#Pizza.MinimumSize" max="#Pizza.MaximumSize" step="1" #bind="Pizza.Size" #bind:event="oninput" />
<span class="size-label">
#(Pizza.Size)" (£#(Pizza.GetFormattedTotalPrice()))
</span>
</div>
<div>
<label>Extra Toppings:</label>
#if (toppings == null)
{
<select class="custom-select" disabled>
<option>(loading...)</option>
</select>
}
else if (Pizza.Toppings.Count >= 6)
{
<div>(maximum reached)</div>
}
else
{
<select id="ToppingSelection" class="custom-select" #onchange="ToppingSelected">
<option value="-1" disabled selected>(select)</option>
#for (var i = 0; i < toppings.Count; i++)
{
<option value="#i">#toppings[i].Name - (£#(toppings[i].GetFormattedPrice()))</option>
}
</select>
}
</div>
<div class="toppings">
#foreach (var topping in Pizza.Toppings)
{
<div class="topping">
#topping.Topping.Name
<span class="topping-price">#topping.Topping.GetFormattedPrice()</span>
<button type="button" class="delete-topping" #onclick="#(() => RemoveTopping(topping.Topping))">x</button>
</div>
}
</div>
</form>
<div class="dialog-buttons">
<button class="btn btn-secondary mr-auto" #onclick="OnCancel">Cancel</button>
<span class="mr-center">
Price: <span class="price">#(Pizza.GetFormattedTotalPrice())</span>
</span>
<button class="btn btn-success ml-auto" #onclick="OnConfirm">Order ></button>
</div>
</div>

Answer 1

I would recommend rewriting the form to use the built-in Blazor components like InputSelect with proper two-way binding etc.
However, a "quick" fix could be something like a static binding. First, create a field that always has a value of -1 which is your code for (select)
#code {
private readonly Int32 _toppingsIndex = -1;
}
In the next step, set the value to the select control.
<select id="ToppingSelection" class="custom-select"
#onchange="ToppingSelected"
value="#_toppingsIndex">
<option value="-1" disabled>(select)</option>
#for (var i = 0; i < toppings.Count; i++)
{
<option value="#i">#toppings[i].Name - (£#(toppings[i].GetFormattedPrice()))</option>
}
</select>
Explanation
As soon as you select something, your method ToppingSelected is executed, and the topping is removed from the list. As soon as the method has finished, a new render cycle is started. The value is still -1, so the option with the value -1 will be selected after the rendering is finished.