Widget: Use focusin/focusout for ._focusable().

Author: scottgonzalez

tests/unit/widget/widget_core.js

@@ -137,7 +137,7 @@ test( "error handling", function() {
 	$.error = error;
 });
 
-test("merge multiple option arguments", function() {
+test( "merge multiple option arguments", function() {
 	expect( 1 );
 	$.widget( "ui.testWidget", {
 		_create: function() {
@@ -173,7 +173,7 @@ test("merge multiple option arguments", function() {
 	});
 });
 
-test( "_getCreateOptions()", function() {
+test( "._getCreateOptions()", function() {
 	expect( 1 );
 	$.widget( "ui.testWidget", {
 		options: {
@@ -488,6 +488,10 @@ test( "._bind() to descendent", function() {
 	descendent
 		.trigger( "keyup" )
 		.trigger( "keydown" );
+	descendent
+		.addClass( "ui-state-disabled" )
+		.trigger( "keyup" )
+		.trigger( "keydown" );
 	widget
 		.testWidget( "destroy" )
 		.trigger( "keyup" )
@@ -537,25 +541,25 @@ test( "._focusable()", function() {
 
 	var div = $( "#widget" ).testWidget().children();
 	ok( !div.hasClass( "ui-state-focus" ), "not focused on init" );
-	div.trigger( "focus" );
+	div.trigger( "focusin" );
 	ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" );
-	div.trigger( "blur" );
+	div.trigger( "focusout" );
 	ok( !div.hasClass( "ui-state-focus" ), "not focused after blur" );
 
-	div.trigger( "focus" );
+	div.trigger( "focusin" );
 	ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" );
 	$( "#widget" ).testWidget( "disable" );
 	ok( !div.hasClass( "ui-state-focus" ), "not focused while disabled" );
-	div.trigger( "focus" );
+	div.trigger( "focusin" );
 	ok( !div.hasClass( "ui-state-focus" ), "can't focus while disabled" );
 	$( "#widget" ).testWidget( "enable" );
 	ok( !div.hasClass( "ui-state-focus" ), "enabling doesn't reset focus" );
 
-	div.trigger( "focus" );
+	div.trigger( "focusin" );
 	ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" );
 	$( "#widget" ).testWidget( "destroy" );
 	ok( !div.hasClass( "ui-state-focus" ), "not focused after destroy" );
-	div.trigger( "focus" );
+	div.trigger( "focusin" );
 	ok( !div.hasClass( "ui-state-focus" ), "event handler removed on destroy" );
 });
 

ui/jquery.ui.widget.js

@@ -236,7 +236,11 @@ $.Widget.prototype = {
 		var instance = this;
 		$.each( handlers, function( event, handler ) {
 			element.bind( event + "." + instance.widgetName, function() {
-				if ( instance.options.disabled ) {
+				// allow widgets to customize the disabled handling
+				// - disabled as an array instead of boolean
+				// - disabled class as method for disabling individual parts
+				if ( instance.options.disabled === true ||
+						$( this ).hasClass( "ui-state-disabled" ) ) {
 					return;
 				}
 				return ( typeof handler === "string" ? instance[ handler ] : handler )
@@ -260,10 +264,10 @@ $.Widget.prototype = {
 	_focusable: function( element ) {
 		this.focusable = this.focusable.add( element );
 		this._bind( element, {
-			focus: function( event ) {
+			focusin: function( event ) {
 				$( event.currentTarget ).addClass( "ui-state-focus" );
 			},
-			blur: function( event ) {
+			focusout: function( event ) {
 				$( event.currentTarget ).removeClass( "ui-state-focus" );
 			}
 		});