Completed
Last Updated: 26 May 2022 18:31 by ADMIN
Release 3.4.0
Darryl
Created on: 15 Dec 2021 09:33
Category: Switch
Type: Bug Report
3
The Enabled parameter doesn't work when the Switch is wrapped inside a label HTML element

I set the Enabled parameter to false, but it didn't disable the input.

Wrap the Switch inside label HTML element and set Enabled to false. Switch will remain enabled. This problem occurs only when you wrap the Switch inside a label. If the Switch is wrapped in another HTML element, the Enabled parameter will work as expected.

 

----------ADMIN EDIT----------

In the meantime, there are two possible workarounds:

  • If you want to use the label HTML element, you can add a custom CSS rule that disables the click. You can see the following example. 
    @if (isEnabled == false)
    {
        <style>
            .switch {
                pointer-events: none;
            }
        </style>
    }
    
    <label class="switch">
        <TelerikSwitch @bind-Value="@isSelected" Enabled="@isEnabled" />
        @( isSelected ? "Selected" : "Not selected" )
    </label>
    
    @code {
        private bool isSelected { get; set; }
        static bool isEnabled { get; set; } = false;
    }
  • The second option is to avoid using label and wrap the Switch with a different HTML element.
1 comment
Antonio
Posted on: 21 Mar 2022 08:59

Same problem with Telerik Blazor 3.1.0

Workaround with optional CSS code work perfectly.