Draggable: active element blurs when clicking on a draggable. Fixes #4261 - Draggable: Inputs do not blur when clicking on a draggable

Author: Steven Luscher

tests/unit/datepicker/datepicker_test_helpers.js

@@ -22,16 +22,6 @@ TestHelpers.datepicker = {
 		var id = $( "<input>" ).appendTo( "#qunit-fixture" );
 		return TestHelpers.datepicker.init( id, options );
 	},
-	onFocus: function( element, onFocus ) {
-		var fn = function( event ){
-			if( !event.originalEvent ) {
-				return;
-			}
-			element.unbind( "focus", fn );
-			onFocus();
-		};
-
-		element.bind( "focus", fn )[ 0 ].focus();
-	},
+	onFocus: TestHelpers.onFocus,
 	PROP_NAME: "datepicker"
 };

tests/unit/draggable/draggable_core.js

@@ -199,4 +199,20 @@ 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 );
+
+	var textInput = $( "<input>" ).appendTo( "#qunit-fixture" ),
+		element = $( "#draggable1" ).draggable();
+
+	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" );
+
+		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" );
+		start();
+	});
+});
+
 })( jQuery );

tests/unit/testsuite.js

@@ -175,6 +175,18 @@ TestHelpers.commonWidgetTests = function( widget, settings ) {
 	});
 };
 
+TestHelpers.onFocus= function( element, onFocus ) {
+	var fn = function( event ){
+		if( !event.originalEvent ) {
+			return;
+		}
+		element.unbind( "focus", fn );
+		onFocus();
+	};
+
+	element.bind( "focus", fn )[ 0 ].focus();
+};
+
 /*
  * Taken from https://github.com/jquery/qunit/tree/master/addons/close-enough
  */

ui/jquery.ui.draggable.js

@@ -78,6 +78,8 @@ $.widget("ui.draggable", $.ui.mouse, {
 
 		var o = this.options;
 
+		$( document.activeElement ).blur();
+
 		// among others, prevent a drag on a resizable-handle
 		if (this.helper || o.disabled || $(event.target).closest(".ui-resizable-handle").length > 0) {
 			return false;