question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Blazor] Cannot bind custom checkbox element's `checked` value

See original GitHub issue

Describe the bug

Cannot bind custom checkbox element’s checked value.

I am using the new FAST web components in a Blazor server side application and trying to bind the checkbox component any way I can, referencing <input type="checkbox" />:

<!-- Works! -->
<input type="checkbox" @bind="MyBool" />

<!-- Does not work... -->
<fast-checkbox @bind-checked="MyBool" @bind-checked:event="onchange"></fast-checkbox>
<fast-checkbox checked="@MyBool" @onchange="@((ChangeEventArgs e) => ViewModel.AcceptTerms = (bool)e.Value"></fast-checkbox>

I know the values themselves are binding because changing the native input will cause the fast components to change to match. The problem seems to lie within the event. The event mapping code has a check built in specifically for checkboxes which causes the change event value to fall back to element.value, in this case e.Value is always "on".

Rather than making an exception for checkboxes, could we simply always include both value and checked in ChangeEventArgs to match the JavaScript behavior? If this approach is acceptable I will open a PR.

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:1
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
CuddleBunnycommented, Sep 1, 2020

@arshia11d - two-way works for my checkbox. If I bind a native checkbox input to the same value they will both update to match. Blazor just doesn’t properly populate ChangeEventArgs because it only does so if the target is input type="checked": https://github.com/dotnet/aspnetcore/blob/1455aaeff118aeaf2b0ab5f1627c2c8ca5df7f11/src/Components/Web.JS/src/Rendering/EventForDotNet.ts#L218-L220

0reactions
msftbot[bot]commented, Aug 3, 2021

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Blazor checkbox binding is not working - server-side
The "Test Value" for the textbox input control initializes just fine. The checkbox's initial value is true, but the checkbox is not checked....
Read more >
Model Binding in Blazor CheckBox Component
In this sample, first check the option and click the submit button to post the selected value in the Checkbox. When the value...
Read more >
DxCheckBox<T>.Checked Property | Blazor
You can also bind <DxCheckBox> to a custom data type (Enum , Object , etc.) ... ValueChecked - Specifies a value that corresponds...
Read more >
Model Binding in Blazor Checkbox and Radio ... - YouTube
Learn how easily you can work with native events and model binding in Blazor Checkbox and Blazor Radio Button components.
Read more >
Binding Checkbox with ASP.Net Blazor - YouTube
How to use checkbox in blazor | Binding Checkbox with ASP.Net Blazor. 4.1K views · 1 year ago BANGLADESH ...more ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found