Checkbox is not checked when the bound value is true and if the input type is set by code

satikcz commented 2 years ago

Is there an existing issue for this?

[X] I have searched the existing issues

Describe the bug

If the input type is determined from a string variable (InputType in the sample), the binding for checked value does not properly work for the first time and checkbox stays unchecked even if the bound Value is true. Consecutive clicking the checkbox works and fixes the checkbox state to match the bound variable.

Use following simplified code in blazor component. After launching the first checkbox is unchecked and second one is checked although both are bound to Values set to true so both should be checked.

<input type="@InputType" @bind="Value"/>
<input type="checkbox" @bind="Value2"/>

@code {
private string InputType => "checkbox";

[Parameter, EditorRequired]
public bool Value {get;set;} = true;
public bool Value2 {get;set;} = true;
}

Expected Behavior

Both checkboxes should be checked initially

Steps To Reproduce

Run following Blazor component code:
Observe first checkbox is not checked while the second one is checked although both should be checked

<input type="@InputType" @bind="Value"/>
<input type="checkbox" @bind="Value2"/>

@code {
private string InputType => "checkbox";

[Parameter, EditorRequired]
public bool Value {get;set;} = true;
public bool Value2 {get;set;} = true;
}

Exceptions (if any)

No response

.NET Version

6.0.401

Anything else?

.NET SDK (reflecting any global.json): Version: 6.0.401 Commit: 0906eae6f8

Runtime Environment: OS Name: Windows OS Version: 10.0.19044 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\6.0.401\

global.json file: Not found

Host: Version: 6.0.9 Architecture: x64 Commit: 163a63591c

.NET SDKs installed: 3.1.423 [C:\Program Files\dotnet\sdk] 6.0.304 [C:\Program Files\dotnet\sdk] 6.0.401 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.All 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.25 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.28 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.29 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.5 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 6.0.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.25 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.28 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.29 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 6.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.25 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.28 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.29 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.17 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.8 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 6.0.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

ghost commented 2 years ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

mkArtakMSFT commented 2 years ago

Thanks for contacting us. We will consider to support this in the future, depending on how much customers need it. What you can do for now, is use an @if statement and render separate component for each type:


@if (InputType == "checkbox")
{
  <input type="checkbox" @bind="Value2"/>
}
else
{
 // ...
}

satikcz commented 2 years ago

Yes, thank you, I resolved it in the end by creating another component for checkbox type.

MajMcCloud commented 2 years ago

I resolved it that way by setting the checked="checked" attribute on the checkbox (input field). Which works fine. But to be honest, it should worked in the first place as expected when binding to a value.

This is what "data binding" is all about: "Consistency", and here we do not have it.

ghost commented 10 months ago

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

dotnet / aspnetcore