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

4 files changed, 31 insertions, 11 deletions

diff --git a/tests/unit/datepicker/datepicker_test_helpers.js b/tests/unit/datepicker/datepicker_test_helpers.js
index 9cb63c9ec..34b41bbc6 100644
--- a/tests/unit/datepicker/datepicker_test_helpers.js
+++ b/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"
 };
\ No newline at end of file
diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js
index 232ac6c17..69906b6a7 100644
--- a/tests/unit/draggable/draggable_core.js
+++ b/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 );
diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js
index ddc59ed08..6e840f415 100644
--- a/tests/unit/testsuite.js
+++ b/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
  */
diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js
index 9ee858725..ab1e800cd 100644
--- a/ui/jquery.ui.draggable.js
+++ b/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;