Server-side blazor : <select> value is bound after being rendered

When I want to display a select tag with its value bound to a property, the select is rendered with the value not bound (first item selected), the correct option is then selected immediately.

To reproduce, on the default Blazor template, I replaced the Counter.razor with this :

@page "/counter"

<select @bind="TestValue">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

<input type="number" @bind="TestValue" />

@code {    
    int TestValue { get; set; } = 1;
}

When we go to this page and reload, we can briefly see the “0” before the “1” in the select. The input is bound immediately.

I don’t see this happens when navigating to the page, but it happens when I press F5 to reload the page.

I have this behavior in preview 7, I didn’t notice it in previous versions.

[SteveSandersonMS]

Done in https://github.com/aspnet/AspNetCore/pull/12996 and https://github.com/aspnet/AspNetCore-Tooling/pull/952

[gulbanana]

if anyone else found this issue searching for why their custom StateHasChanged-based binding wasn’t working - render your selection using option.selected now, not select.value!