diff options
| -rw-r--r-- | tests/unit/button/button.html | 2 | ||||
| -rw-r--r-- | tests/unit/button/button_core.js | 13 | ||||
| -rw-r--r-- | ui/jquery.ui.button.js | 27 |
3 files changed, 30 insertions, 12 deletions
diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html index eeb568686..223581ef7 100644 --- 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 16c7ca450..55dda68b3 100644 --- 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 dd6892275..ae3b86ae9 100644 --- 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(); |