library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Draggable: Fix spurious blur in dialogs on mousedown

Browse Source 
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
This commit is contained in:
Ryan Oriecuia 2016-08-16 16:52:15 -07:00 committed by Scott González
parent 51461d5238
commit 8c66934434
2 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
tests/unit/draggable/core.js
View File

@ -338,6 +338,36 @@ QUnit.test( "blur behavior - descendant of handle", function( assert ) {
} ); } );
} ); } );
QUnit.test( "blur behavior - off handle", function( assert ) {
var ready = assert.async();
assert.expect( 3 );
var element = $( "#draggable2" ).draggable( { handle: "span" } ),
focusElement = $( "<div tabindex='1'></div>" ).appendTo( element );
// Mock $.ui.safeBlur with a spy
var _safeBlur = $.ui.safeBlur;
var blurCalledCount = 0;
$.ui.safeBlur = function() {
blurCalledCount++;
};
testHelper.onFocus( focusElement, function() {
assert.strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused before mousing down on a draggable" );
testHelper.move( element, 1, 1 );
assert.strictEqual( blurCalledCount, 0, "draggable doesn't blur when mousing down off handle" );
testHelper.move( element.find( "span" ), 1, 1 );
assert.strictEqual( blurCalledCount, 1, "draggable blurs when mousing down on handle" );
// Restore safeBlur
$.ui.safeBlur = _safeBlur;
ready();
} );
} );
QUnit.test( "ui-draggable-handle assigned to appropriate element", function( assert ) { QUnit.test( "ui-draggable-handle assigned to appropriate element", function( assert ) {
assert.expect( 5 ); assert.expect( 5 );

11
ui/widgets/draggable.js
View File

@ -103,8 +103,6 @@ $.widget( "ui.draggable", $.ui.mouse, {
_mouseCapture: function( event ) { _mouseCapture: function( event ) {
var o = this.options; var o = this.options;
this._blurActiveElement( event );
// Among others, prevent a drag on a resizable-handle // Among others, prevent a drag on a resizable-handle
if ( this.helper || o.disabled || if ( this.helper || o.disabled ||
$( event.target ).closest( ".ui-resizable-handle" ).length > 0 ) { $( event.target ).closest( ".ui-resizable-handle" ).length > 0 ) {
@ -117,6 +115,8 @@ $.widget( "ui.draggable", $.ui.mouse, {
return false; return false;
} }
this._blurActiveElement( event );
this._blockFrames( o.iframeFix === true ? "iframe" : o.iframeFix ); this._blockFrames( o.iframeFix === true ? "iframe" : o.iframeFix );
return true; return true;
@ -147,11 +147,10 @@ $.widget( "ui.draggable", $.ui.mouse, {
var activeElement = $.ui.safeActiveElement( this.document[ 0 ] ), var activeElement = $.ui.safeActiveElement( this.document[ 0 ] ),
target = $( event.target ); target = $( event.target );
// Only blur if the event occurred on an element that is: // Don't blur if the event occurred on an element that is within
// 1) within the draggable handle // the currently focused element
// 2) but not within the currently focused element
// See #10527, #12472 // See #10527, #12472
if ( this._getHandle( event ) && target.closest( activeElement ).length ) { if ( target.closest( activeElement ).length ) {
return; return;
} }