library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Button: Remove ui-state-focus class when becoming disabled. Fixes #9169 - Button: Disabled button maintains ui-state-focus in IE & Firefox on Windows.

Browse Source
This commit is contained in:
Scott González 2013-04-11 14:03:51 -04:00
parent 2de31fdbf4
commit 0d0b05ec7c
3 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/unit/button/button.html
View File

@ -71,6 +71,8 @@
<div><input id="submit" type="submit" value="Label"></div>
<button id="button1">Button</button>
</div>
</body>
</html>

13
tests/unit/button/button_core.js
View File

@ -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);

27
ui/jquery.ui.button.js vendored
View File

@ -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();