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
jquery · Nov 25, 2013 · 6e48da0 · 6e48da0
1 parent 707f46a
commit 6e48da0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/tests/unit/button/button.html b/tests/unit/button/button.html
@@ -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>
diff --git 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
@@ -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;
 		}