Skip to content
Permalink
Browse files

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

…69 - Button: Disabled button maintains ui-state-focus in IE & Firefox on Windows.

(cherry picked from commit 0d0b05e)

Conflicts:

	ui/jquery.ui.button.js
  • Loading branch information...
scottgonzalez committed Apr 11, 2013
1 parent 707f46a commit 6e48da049014c484a219df11ab8f0551afb27fb5
Showing with 29 additions and 15 deletions.
  1. +2 −0 tests/unit/button/button.html
  2. +13 −0 tests/unit/button/button_core.js
  3. +14 −15 ui/jquery.ui.button.js
@@ -71,6 +71,8 @@ <h2 id="qunit-userAgent"></h2>

<div><input id="submit" type="submit" value="Label"></div>

<button id="button1">Button</button>

</div>
</body>
</html>
@@ -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);
@@ -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() {
@@ -260,7 +260,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() );
@@ -273,10 +273,9 @@ $.widget( "ui.button", {
_setOption: function( key, value ) {
this._super( key, value );
if ( key === "disabled" ) {
this.element.prop( "disabled", !!value );
if ( value ) {
this.element.prop( "disabled", true );
} else {
this.element.prop( "disabled", false );
this.buttonElement.removeClass( "ui-state-focus" );
}
return;
}

0 comments on commit 6e48da0

Please sign in to comment.
You can’t perform that action at this time.