I'm writing a Blazor application (server side, .NET 8.0), that has radio buttons. I am using the generic <input> HTML instead of a .NET component. This is a standard "loop through all the answers and mark the one that is selected".
@foreach (var answer in Component.Answers.Where(a => !a.NotObserved || ShowNotObserved).Select((value, i) => new { i, value })) {<div class="first first-@answer.value.NumberColumns first-mobilerow-@answer.i"><input type="radio" value="@answer.value.QuantitativeAnswer" checked="@(ComponentAnswer == null ? false : answer.value.QuantitativeAnswer == ComponentAnswer.QuantitativeScore)" disabled="@(IsReadOnly && !(ComponentAnswer == null ? false : answer.value.QuantitativeAnswer == ComponentAnswer.QuantitativeScore))" name="@Component.Code" id="@Component.Code-@answer.value.QuantitativeAnswer" aria-describedby="description-@Component.Code-@answer.value.QuantitativeAnswer" @onchange="e => SaveAnswer(answer.value.QuantitativeAnswer, answer.value.QualitativeAnswer, answer.value.Description)" /><div id="description-@Component.Code-@answer.value.QuantitativeAnswer" style="display: none;">@answer.value.Description</div><label for="@Component.Code-@answer.value.QuantitativeAnswer">@answer.value.Answer(ShowQuantitativeAnswer)</label></div> }This seems very cargo cult programming, but when I move the checked attribute after the aria-describedby attribute, sometimes none of the radio buttons are selected (even if I add a statement confirming that the statement is true: answer.value.QuantitativeAnswer == ComponentAnswer.QuantitativeScore). This doesn't happen all the time but enough that I can repeat the issue.
Is there something that could short-circuit the checked attribute? Order of the attributes shouldn't matter, correct? Thanks!