Maybe weird behaviour of DOM tree updating (client side blazor, razor, C# .net ASP.net hosted) - dom

Question

Hello there,
i have just made a weird experience with the DOM tree updating of blazor.
The code is easy:
1) the user can choose between 2 Types A or B with radiobuttons.
2) when A or B is chosen, more options appear as checkboxes (A lets you select A1 and/or A2, B lets you select B1 and/or B2).
Big question is: what happens, if you do the following:
3) select A (=> two checkboxes A1 and A2 appear)
4) check A1
5) select B (=> A1 and A2 vanish, checkboxes B1 and B2 appear)
6) look at the state of B1
I made 2 different versions:
7) one, where i define the checkboxes for A and B separately -> this works as intended (=B1 and B2 unchecked)
8) one, where i define them directly, but with the right name -> this does not work! B1 is checked!
As i understand it, when selecting B (step 5), blazor updates the DOM tree. But i dont get why the browser remembers the checkbox B1 as checked, only because i checked A1, and even though i created it completely new. This looks like a bug to me. I mean, i even give the checkbox another name.
Is there a possibility to "clear the browser memory regarding the checking-state of the checkbox" or something else?
I created this minimum-example for simplicity. In my code, the checkboxes are created in a foreach, and i also have the not-intended behaviour.
Happy to hear your opinion and/or hints.
Tim
Here is the code of my razor component:
<!-- Define 2 Radio-Buttons, User selects A or B -->
<label>
<input type="radio" name="RB_Type" #onclick="#(() => SelectType("A"))" /> Type A
</label>
<br />
<label>
<input type="radio" name="RB_Type" #onclick="#(() => SelectType("B"))" /> Type B
</label>
<br />
<!-- The following code works as intended -->
#if (accType == "A")
{
<input type="checkbox" name="A1" unchecked><label>A1</label>
<br />
<input type="checkbox" name="A2" unchecked><label>A2</label>
<br />
}
else if (accType == "B")
{
<input type="checkbox" name="B1" unchecked><label>B1</label>
<br />
<input type="checkbox" name="B2" unchecked><label>B2</label>
<br />
}
<!-- The following code does not work as intended -->
#if (accType != "")
{
<input type="checkbox" name="#(accType + "1")" unchecked><label>#(accType + "1")</label>
<br />
<input type="checkbox" name="#(accType + "2")" unchecked><label>#(accType + "2")</label>
<br />
}
#code {
private string accType = "";
private void SelectType(string type)
{
this.accType = type;
StateHasChanged();
}
}

Answer 1

Add some #key="" attributes like so:
#if (accType != "")
{
<input type="checkbox" #key="#(accType + "1")" name="#(accType + "1")" unchecked><label>#(accType + "1")</label>
<br />
<input type="checkbox" #key="#(accType + "2")" name="#(accType + "2")" unchecked><label>#(accType + "2")</label>
<br />
}
The blazor diff engine tries to minimize changes. So when it sees 2 checkboxes at the same place it will assume they are the same. The name property doesn't help to distinguish between A and B controls.
But you will find this 2nd version (#(accType + "1")) of your code is difficult in databinding too.