Draggable: Improve detection for when to blur the active element

Fixes #12472
Fixes #14905
Closes gh-1548

diff --git a/tests/unit/draggable/core.js b/tests/unit/draggable/core.js
index 61d8503ea3e0d1575155fc4cc1ae9edad4ad5b58..a36852ebbe48765c95a291a8c6fae6ff99e3d894 100644 (file)
--- a/tests/unit/draggable/core.js
+++ b/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 );
 

diff --git a/ui/widgets/draggable.js b/ui/widgets/draggable.js
index 7da09b7ec9d519df44e18a5cfc54f1f4eb305ccf..32bf861eda39c872f0b24446a4cbe9747f3004c4 100644 (file)
--- a/ui/widgets/draggable.js
+++ b/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 ) {