When I click the checkbox, the OnChange event fires with the new value, but the model field is not updated yet.
<TelerikCheckBox Id="myCheckBox"
@bind-Value="@isSelected"
OnChange="@ChangeHandler">
</TelerikCheckBox>
<label for="myCheckBox">@(isSelected ? "Selected" : "Not selected")</label>
<div class="text-info">
@Result
</div>
@code {
private bool isSelected { get; set; }
private string Result { get; set; } = String.Empty;
void ChangeHandler(object value)
{
Console.WriteLine($"CHECKBOX: the model is now {isSelected} and the handler received {value}");
Result = $"OnChange event fired with: {value}";
}
}
I am getting a console error (not a crash) when I have a checkbox like this:
<TelerikCheckBox Enabled="@(!CheckBoxValueProperty)"
@bind-Value="@CheckBoxValueProperty">
</TelerikCheckBox>The console error is:
blazor.webassembly.js:1 Uncaught (in promise) Error: Assertion failed - heap is currently locked
at tt (blazor.webassembly.js:1:45154)
at Object.beginInvokeDotNetFromJS (blazor.webassembly.js:1:42007)
at b (blazor.webassembly.js:1:1995)
at N.invokeMethodAsync (blazor.webassembly.js:1:3845)
at $W.invokeMethodAsync (telerik-blazor.js:50:1037174)
at HTMLInputElement.<anonymous> (telerik-blazor.js:50:2198768)
at se.applyAttribute (blazor.webassembly.js:1:24602)
at se.applyEdits (blazor.webassembly.js:1:21459)
at se.updateComponent (blazor.webassembly.js:1:20461)
at blazor.webassembly.js:1:57076The checkbox works properly and disables itself when it is checked with a precondition of CheckBoxValueProperty = false.
It would be good though, if this simple method of having the checkbox disable itself with the same property value, would not throw the console error.
We have encountered the following accessibility issue with the Checkbox:
Snippet:
<input type="checkbox" data-id="e218e1d5-71c6-4327-8d3c-88b0c62397a1" class="k-checkbox telerik-blazor" aria-checked="false">How to fix - Fix ONE the following:
- Form element does not have an implicit (wrapped) <label>
- Form element does not have an explicit <label>
- aria-label attribute does not exist or is empty
- aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
- Element has no title attribute
- Element has no placeholder attribute
- Element's default semantics were not overridden with role="none" or role="presentation"
The Blazor TelerikCheckBox do not implement the Name property as TelerikTextBox do instead.
I need to use it in a native html form to post login values to an action for cookie authentication.
===
ADMIN EDIT
===
For the time being, a possible option is to set the name attribute of the HTML input element with JavaScript. Here is an example: https://blazorrepl.telerik.com/GdatabEA52LKlGnv02.