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.
  • Loading branch information...
scottgonzalez committed Apr 11, 2013
1 parent 2de31fd commit 0d0b05ec7cf702b8782b19c993eeb30398a090f4
Showing with 30 additions and 12 deletions.
  1. +2 −0 tests/unit/button/button.html
  2. +13 −0 tests/unit/button/button_core.js
  3. +15 −12 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() {
@@ -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();

0 comments on commit 0d0b05e

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.