Draggable: Improve detection for when to blur the active element

Fixes #12472
Fixes #14905
Closes gh-1548

Author: scottgonzalez

tests/unit/draggable/core.js

@@ -291,7 +291,7 @@ 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( "blur behavior", function() {
+asyncTest( "blur behavior - handle is main element", function() {
 	expect( 3 );
 
 	var element = $( "#draggable1" ).draggable(),
@@ -315,6 +315,26 @@ asyncTest( "blur behavior", function() {
 	} );
 } );
 
+asyncTest( "blur behavior - descendant of handle", function() {
+	expect( 2 );
+
+	var element = $( "#draggable2" ).draggable( { handle: "span" } ),
+
+		// The handle is a descendant, but we also want to grab a descendant of the handle
+		handle = element.find( "span em" ),
+		focusElement = $( "<div tabindex='1'></div>" ).appendTo( element );
+
+	testHelper.onFocus( focusElement, function() {
+		strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused before mousing down on a draggable" );
+
+		testHelper.move( handle, 50, 50 );
+
+		// Elements outside of the handle should blur (#12472, #14905)
+		notStrictEqual( document.activeElement, focusElement.get( 0 ), "test element is no longer focused after mousing down on a draggable" );
+		start();
+	} );
+} );
+
 test( "ui-draggable-handle assigned to appropriate element", function( assert ) {
 	expect( 5 );
 

ui/widgets/draggable.js

@@ -143,14 +143,19 @@ $.widget( "ui.draggable", $.ui.mouse, {
 	},
 
 	_blurActiveElement: function( event ) {
-
-		// Only need to blur if the event occurred on the draggable itself, see #10527
-		if ( !this.handleElement.is( event.target ) ) {
+		var activeElement = $.ui.safeActiveElement( this.document[ 0 ] ),
+			target = $( event.target );
+
+		// Only blur if the event occurred on an element that is:
+		// 1) within the draggable handle
+		// 2) but not within the currently focused element
+		// See #10527, #12472
+		if ( this._getHandle( event ) && target.closest( activeElement ).length ) {
 			return;
 		}
 
 		// Blur any element that currently has focus, see #4261
-		$.ui.safeBlur( $.ui.safeActiveElement( this.document[ 0 ] ) );
+		$.ui.safeBlur( activeElement );
 	},
 
 	_mouseStart: function( event ) {