Draggable: Improve detection for when to blur the active element

Fixes #12472
Fixes #14905
Closes gh-1548
This commit is contained in:
Scott González 2015-05-05 09:29:21 -04:00
parent 8fc3ba22ba
commit 63c103dd54
2 changed files with 29 additions and 4 deletions

View File

@ -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 );

View File

@ -143,14 +143,19 @@ $.widget( "ui.draggable", $.ui.mouse, {
},
_blurActiveElement: function( event ) {
var activeElement = $.ui.safeActiveElement( this.document[ 0 ] ),
target = $( event.target );
// Only need to blur if the event occurred on the draggable itself, see #10527
if ( !this.handleElement.is( 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 ) {