diff options
| -rw-r--r-- | tests/unit/draggable/core.js | 22 | ||||
| -rw-r--r-- | ui/widgets/draggable.js | 13 |
2 files changed, 30 insertions, 5 deletions
diff --git a/tests/unit/draggable/core.js b/tests/unit/draggable/core.js index 61d8503ea..a36852ebb 100644 --- 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 7da09b7ec..32bf861ed 100644 --- 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 ) { |