Draggable: Only focus the draggable if the event occurs on a handle

mikesherov · mikesherov · commit d10440fe44c8 · 2014-08-17T14:13:20.000-04:00
Refs #10527
diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js
@@ -262,18 +262,26 @@ test( "#8399: A draggable should become the active element after you are finishe
 	strictEqual( document.activeElement, element.get( 0 ), "finishing moving a draggable anchor made it the active element" );
 });
 
-asyncTest( "#4261: active element should blur when mousing down on a draggable", function() {
-	expect( 2 );
+asyncTest( "blur behavior", function() {
+	expect( 3 );
+
+	var element = $( "#draggable1" ).draggable(),
+		focusElement = $( "<div tabindex='1'></div>" ).appendTo( element );
+
+	TestHelpers.onFocus( focusElement, function() {
+		strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused before mousing down on a draggable" );
 
-	var textInput = $( "<input>" ).appendTo( "#qunit-fixture" ),
-		element = $( "#draggable1" ).draggable();
+		TestHelpers.draggable.move( focusElement, 1, 1 );
 
-	TestHelpers.onFocus( textInput, function() {
-		strictEqual( document.activeElement, textInput.get( 0 ), "ensure that a focussed text input is the active element before mousing down on a draggable" );
+		// http://bugs.jqueryui.com/ticket/10527
+		// Draggable: Can't select option in modal dialog (IE8)
+		strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused after mousing down on itself" );
 
 		TestHelpers.draggable.move( element, 50, 50 );
 
-		notStrictEqual( document.activeElement, textInput.get( 0 ), "ensure the text input is no longer the active element after mousing down on a draggable" );
+		// http://bugs.jqueryui.com/ticket/4261
+		// active element should blur when mousing down on a draggable
+		notStrictEqual( document.activeElement, focusElement.get( 0 ), "test element is no longer focused after mousing down on a draggable" );
 		start();
 	});
 });
diff --git a/ui/draggable.js b/ui/draggable.js
@@ -123,9 +123,14 @@ $.widget("ui.draggable", $.ui.mouse, {
 
 	},
 
-	_blurActiveElement: function() {
+	_blurActiveElement: function( event ) {
 		var document = this.document[ 0 ];
 
+		// Only need to blur if the event occurred on the draggable itself, see #10527
+		if ( !this.handleElement.is( event.target ) ) {
+			return;
+		}
+
 		// support: IE9
 		// IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
 		try {
@@ -134,12 +139,8 @@ $.widget("ui.draggable", $.ui.mouse, {
 			// If the <body> is blurred, IE will switch windows, see #9520
 			if ( document.activeElement && document.activeElement.nodeName.toLowerCase() !== "body" ) {
 
-				// Only need to blur if the event occurred on the draggable, see #10527
-				if ( this.handleElement.is( event.target ) ) {
-
-					// Blur any element that currently has focus, see #4261
-					$( document.activeElement ).blur();
-				}
+				// Blur any element that currently has focus, see #4261
+				$( document.activeElement ).blur();
 			}
 		} catch ( error ) {}
 	},
@@ -289,7 +290,7 @@ $.widget("ui.draggable", $.ui.mouse, {
 		return false;
 	},
 
-	_mouseUp: function(event) {
+	_mouseUp: function( event ) {
 		//Remove frame helpers
 		$("div.ui-draggable-iframeFix").each(function() {
 			this.parentNode.removeChild(this);
@@ -300,8 +301,11 @@ $.widget("ui.draggable", $.ui.mouse, {
 			$.ui.ddmanager.dragStop(this, event);
 		}
 
-		// The interaction is over; whether or not the click resulted in a drag, focus the element
-		this.element.focus();
+		// Only need to focus if the event occurred on the draggable itself, see #10527
+		if ( this.handleElement.is( event.target ) ) {
+			// The interaction is over; whether or not the click resulted in a drag, focus the element
+			this.element.focus();
+		}
 
 		return $.ui.mouse.prototype._mouseUp.call(this, event);
 	},
