Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 18 Mar 2019 15:00 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>
4 comments
ADMIN
Ivan Danchev
Posted on: 18 Mar 2019 15:00
Hello,

The issue is already fixed, which is indicated by the status ("Completed"). We plan on including the fix in the next release - R2 2019 (due in mid May).

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.
Stuart
Posted on: 11 Mar 2019 15:16
Do you know when this will be released or if we can get a patch?
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.
Create an account Log In
View
Type
Status
Category