Button: Remove ui-state-focus class when becoming disabled. Fixes #9169 - Button...

diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html
index eeb56868673d4cad1cbf2b9c8e00f45b578ed29f..223581ef70c47529bec0c2702bd993a824aeb508 100644 (file)
--- a/tests/unit/button/button.html
+++ b/tests/unit/button/button.html
@@ -71,6 +71,8 @@
 
 <div><input id="submit" type="submit" value="Label"></div>
 
+<button id="button1">Button</button>
+
 </div>
 </body>
 </html>

diff --git a/tests/unit/button/button_core.js b/tests/unit/button/button_core.js
index 16c7ca450c8c4f852b4204d1cd2b3cd70ab21e97..55dda68b3784922c0b0ac38ff881985093f7b061 100644 (file)
--- a/tests/unit/button/button_core.js
+++ b/tests/unit/button/button_core.js
@@ -196,4 +196,17 @@ test( "#7534 - Button label selector works for ids with \":\"", function() {
        ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" );
 });
 
+asyncTest( "#9169 - Disabled button maintains ui-state-focus", function() {
+       expect( 2 );
+       var element = $( "#button1" ).button();
+       element[ 0 ].focus();
+       setTimeout(function() {
+               ok( element.hasClass( "ui-state-focus" ), "button has ui-state-focus" );
+               element.button( "disable" );
+               ok( !element.hasClass( "ui-state-focus" ),
+                       "button does not have ui-state-focus when disabled" );
+               start();
+       });
+});
+
 })(jQuery);

diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js
index dd6892275926471e7ed183efd82b6e015187a1b3..ae3b86ae9d4b3ec8458a35fee3b44cecb5366d81 100644 (file)
--- a/ui/jquery.ui.button.js
+++ b/ui/jquery.ui.button.js
@@ -16,7 +16,6 @@
 
 var lastActive, startXPos, startYPos, clickDragged,
        baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
-       stateClasses = "ui-state-hover ui-state-active ",
        typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",
        formResetHandler = function() {
                var form = $( this );
@@ -71,8 +70,7 @@ $.widget( "ui.button", {
                var that = this,
                        options = this.options,
                        toggleButton = this.type === "checkbox" || this.type === "radio",
-                       activeClass = !toggleButton ? "ui-state-active" : "",
-                       focusClass = "ui-state-focus";
+                       activeClass = !toggleButton ? "ui-state-active" : "";
 
                if ( options.label === null ) {
                        options.label = (this.type === "input" ? this.buttonElement.val() : this.buttonElement.html());
@@ -104,14 +102,16 @@ $.widget( "ui.button", {
                                }
                        });
 
-               this.element
-                       .bind( "focus" + this.eventNamespace, function() {
-                               // no need to check disabled, focus won't be triggered anyway
-                               that.buttonElement.addClass( focusClass );
-                       })
-                       .bind( "blur" + this.eventNamespace, function() {
-                               that.buttonElement.removeClass( focusClass );
-                       });
+               // Can't use _focusable() because the element that receives focus
+               // and the element that gets the ui-state-focus class are different
+               this._on({
+                       focus: function() {
+                               this.buttonElement.addClass( "ui-state-focus" );
+                       },
+                       blur: function() {
+                               this.buttonElement.removeClass( "ui-state-focus" );
+                       }
+               });
 
                if ( toggleButton ) {
                        this.element.bind( "change" + this.eventNamespace, function() {
@@ -257,7 +257,7 @@ $.widget( "ui.button", {
                this.element
                        .removeClass( "ui-helper-hidden-accessible" );
                this.buttonElement
-                       .removeClass( baseClasses + " " + stateClasses + " " + typeClasses )
+                       .removeClass( baseClasses + " ui-state-active " + typeClasses )
                        .removeAttr( "role" )
                        .removeAttr( "aria-pressed" )
                        .html( this.buttonElement.find(".ui-button-text").html() );
@@ -272,6 +272,9 @@ $.widget( "ui.button", {
                if ( key === "disabled" ) {
                        this.widget().toggleClass( "ui-state-disabled", !!value );
                        this.element.prop( "disabled", !!value );
+                       if ( value ) {
+                               this.buttonElement.removeClass( "ui-state-focus" );
+                       }
                        return;
                }
                this._resetButton();