Why do my Blazor radio buttons have to be clicked twice to select and get unselected when a checkbox is clicked?

user_7330833 0
Viewed 389

I have a Blazor form with some radio buttons (inside an InputRadioGroup) and some checkboxes. I'm having two problems with it:

  1. I have to click the radio buttons twice in order for it to be selected.
  2. Once selected, if I click a checkbox, the radio gets unselected.

I have reproduced the issue in a new project using the Blazer Server .net 6.0 template by adding this razor component:

<EditForm Model="FormModel">
    <InputRadioGroup @bind-Value="FormModel.SelectedRadio">
        <InputRadio Value="1" /> 1
        <InputRadio Value="2" /> 2
    </InputRadioGroup>
    <InputCheckbox @bind-Value="FormModel.Checkbox"/>
</EditForm>

@code {
    private FormData FormModel { get; set; } = new FormData();

    public class FormData
    {
        public string SelectedRadio { get; set; }
        public bool Checkbox { get; set; }
    }
}
blazor-server-side blazor
1 Answers

See this modified version of your code. I've changed FormModel.SelectedRadio to an int. Inputxxxx are typed controls, not the standard text used by html base controls.

@page "/"
<EditForm Model="FormModel">
    <InputRadioGroup @bind-Value="FormModel.SelectedRadio">
        <InputRadio Value=1 /> 1
        <InputRadio Value=2 /> 2
    </InputRadioGroup>
    <InputCheckbox @bind-Value="FormModel.Checkbox"/>
</EditForm>

Selected: @FormModel.SelectedRadio
@code {
    private FormData FormModel { get; set; } = new FormData();

    public class FormData
    {
        public int SelectedRadio { get; set; }
        public bool Checkbox { get; set; }
    }
}
user_130657810
Related