Radio/Checkbox - on inspection using selector, selects label instead of actual Radio/Checkbox element

[DurgaSanthi]

Hi,

I am using Blazorise Radio and Checkbox component. There is an issue with element selector regarding these two components.

Steps to reproduce:

1. Define a Radio component
2. In browser(chorme/Edge), select the Radio button.
3. It will select the label instead of actual Radio element

Attaching image for clarity.

Because of this we are not able to capture actual element for testing purpose.

Appreciate any help. Please let me know if this can be rectified in future versions.

[stsrki]

I don't this has anything wrong with Blazorise. We only follow the Bootstrap documentation and HTML structure. And the same thing is happening on their own web: https://getbootstrap.com/docs/4.6/components/forms/#radios

This has something to do with custom radios. From what I can see on their web, regular radios seem to behave OK.

[DurgaSanthi]

Thank you for your reply. I got your point. For future versions is it possible to consider this and provide update using non custom Radio/Checkboxes.

[stsrki]

You can already use default non-custom by disabling UseCustomInputStyles.

protected override async Task OnInitializedAsync()
{
    ClassProvider.UseCustomInputStyles = false;

    await base.OnInitializedAsync();
}

[Inject] protected IClassProvider ClassProvider { get; set; }

The downside is that it will also disable other components, like Select and FileEdit. Maybe we can consider adding more flags for each component type so that is easier to control what gets disabled.

[DurgaSanthi]

Thank you so much.