Approved
Last Updated: 11 Feb 2019 11:48 by ADMIN
Casey
Created on: 07 Feb 2019 01:17
Category: Button
Type: Bug Report
0
Issue with button disabled styling in latest release (Kendo UI 2019 R1)

After updating to the latest version of Kendo UI for jQuery we noticed that the button disabled style appears to be broken.

 

We were able to reproduce the issue using the Dojo.

The steps to reproduce are very simple.

  1. Open the DoJo
  2. Between the <body> tags place the code below.
  3. Select "Kendo UI 2019 R1" for the Library
  4. Run the project and click the Disable button.  Notice that the edit box is styled as disabled, but the button is not, but looks enabled, yet is not clickable.
  5. Now switch to the previously released library "Kendo UI 2018 R3 SP1"
  6. Click run and click the Disable button.  Notice that both the edit box and button appear and act disabled.

 

 

<! Code to put in between tags >

<div id="view">

  <input type="text" data-bind="value: name, disabled: isNameDisabled" />
  <button data-bind="click: disableInput, disabled: isNameDisabled" class="k-button">Disable</button>

<script>
var viewModel = kendo.observable({
    isNameDisabled: false,
    name: "John Doe",
    disableInput: function() {
        this.set("isNameDisabled", true);
    }
});

kendo.bind($("#view"), viewModel);
</script>
</div>
(Total attached files size should be smaller than 20mb. Allowed extensions: .zip, .rar, .jpg, .png, .gif)
2 comments
ADMIN
Ivan Danchev
Posted on: 11 Feb 2019 11:48
Hello Casey,

We logged this issue for fixing. I converted this thread to "Bug Report" and made it visible on our Feedback Portal. This way any progress on fixing the bug will be reflected in the Bug Report item's status. 

I updated your Telerik points for reporting this issue.

Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
ADMIN
Ivan Danchev
Posted on: 07 Feb 2019 14:49
Hello Casey,

Thank you for reporting this behavior. I will check whether this is a regression we have introduced in version 2019.1.115 and get back to you with more info.

For now you can use the following two CSS rules, which bring back the previous behavior:
.k-button[disabled], .k-state-disabled .k-button, .k-state-disabled .k-button:hover {
    color: #c3c3c3;
    border-color: #c5c5c5;
    background-color: #e9e9e9;
    background-image: url(textures/highlight.png);
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 100%);
}
 
.k-button:focus, .k-button:focus:hover, .k-state-disabled .k-button.k-state-focused {
    border-color: #c5c5c5;
    box-shadow: inset 0 0 3px 1px #b6b6b6;
}

Dojo example
(with the rules applied).

Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.