Draggable: Fix spurious blur in dialogs on mousedown

I was running into a problem with a popup menu control in a dialog; clicks
weren't working (but keyboard was working fine). It turned out that the menu
was getting destroyed before the click event could fire.

Tracked down the issue to the way draggable blurs focused controls; it was
doing the blur before it ran through the logic to figure out if the drag was
actually on the handle. I've moved the blur below these checks, so it'll only
blur things if it actually needs to handle the drag. Otherwise, it asserts no
opinion on what should and shouldn't be focused, which seems like the way
things ought to be.

Also, added a unit test to check for the expected behavior.

Fixes #15046
Closes gh-1730

1 files changed, 5 insertions, 6 deletions

diff --git a/ui/widgets/draggable.js b/ui/widgets/draggable.js
index 6b862d0d0..9e46c81bb 100644
--- a/ui/widgets/draggable.js
+++ b/ui/widgets/draggable.js
@@ -103,8 +103,6 @@ $.widget( "ui.draggable", $.ui.mouse, {
 	_mouseCapture: function( event ) {
 		var o = this.options;
 
-		this._blurActiveElement( event );
-
 		// Among others, prevent a drag on a resizable-handle
 		if ( this.helper || o.disabled ||
 				$( event.target ).closest( ".ui-resizable-handle" ).length > 0 ) {
@@ -117,6 +115,8 @@ $.widget( "ui.draggable", $.ui.mouse, {
 			return false;
 		}
 
+		this._blurActiveElement( event );
+
 		this._blockFrames( o.iframeFix === true ? "iframe" : o.iframeFix );
 
 		return true;
@@ -147,11 +147,10 @@ $.widget( "ui.draggable", $.ui.mouse, {
 		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
+		// Don't blur if the event occurred on an element that is within
+		// the currently focused element
 		// See #10527, #12472
-		if ( this._getHandle( event ) && target.closest( activeElement ).length ) {
+		if ( target.closest( activeElement ).length ) {
 			return;
 		}