Draggable: Only focus the draggable if the event occurs on a handle

Refs #10527
This commit is contained in:
Mike Sherov 2014-08-16 09:44:05 -04:00
parent 075421d6d9
commit d10440fe44
2 changed files with 29 additions and 17 deletions

View File

@ -262,18 +262,26 @@ 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( "#4261: active element should blur when mousing down on a draggable", function() {
expect( 2 );
asyncTest( "blur behavior", function() {
expect( 3 );
var textInput = $( "<input>" ).appendTo( "#qunit-fixture" ),
element = $( "#draggable1" ).draggable();
var element = $( "#draggable1" ).draggable(),
focusElement = $( "<div tabindex='1'></div>" ).appendTo( element );
TestHelpers.onFocus( textInput, function() {
strictEqual( document.activeElement, textInput.get( 0 ), "ensure that a focussed text input is the active element before mousing down on a draggable" );
TestHelpers.onFocus( focusElement, function() {
strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused before mousing down on a draggable" );
TestHelpers.draggable.move( focusElement, 1, 1 );
// http://bugs.jqueryui.com/ticket/10527
// Draggable: Can't select option in modal dialog (IE8)
strictEqual( document.activeElement, focusElement.get( 0 ), "test element is focused after mousing down on itself" );
TestHelpers.draggable.move( element, 50, 50 );
notStrictEqual( document.activeElement, textInput.get( 0 ), "ensure the text input is no longer the active element after mousing down on a draggable" );
// http://bugs.jqueryui.com/ticket/4261
// active element should blur when mousing down on a draggable
notStrictEqual( document.activeElement, focusElement.get( 0 ), "test element is no longer focused after mousing down on a draggable" );
start();
});
});

View File

@ -123,9 +123,14 @@ $.widget("ui.draggable", $.ui.mouse, {
},
_blurActiveElement: function() {
_blurActiveElement: function( event ) {
var document = this.document[ 0 ];
// Only need to blur if the event occurred on the draggable itself, see #10527
if ( !this.handleElement.is( event.target ) ) {
return;
}
// support: IE9
// IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
try {
@ -134,12 +139,8 @@ $.widget("ui.draggable", $.ui.mouse, {
// If the <body> is blurred, IE will switch windows, see #9520
if ( document.activeElement && document.activeElement.nodeName.toLowerCase() !== "body" ) {
// Only need to blur if the event occurred on the draggable, see #10527
if ( this.handleElement.is( event.target ) ) {
// Blur any element that currently has focus, see #4261
$( document.activeElement ).blur();
}
// Blur any element that currently has focus, see #4261
$( document.activeElement ).blur();
}
} catch ( error ) {}
},
@ -289,7 +290,7 @@ $.widget("ui.draggable", $.ui.mouse, {
return false;
},
_mouseUp: function(event) {
_mouseUp: function( event ) {
//Remove frame helpers
$("div.ui-draggable-iframeFix").each(function() {
this.parentNode.removeChild(this);
@ -300,8 +301,11 @@ $.widget("ui.draggable", $.ui.mouse, {
$.ui.ddmanager.dragStop(this, event);
}
// The interaction is over; whether or not the click resulted in a drag, focus the element
this.element.focus();
// Only need to focus if the event occurred on the draggable itself, see #10527
if ( this.handleElement.is( event.target ) ) {
// The interaction is over; whether or not the click resulted in a drag, focus the element
this.element.focus();
}
return $.ui.mouse.prototype._mouseUp.call(this, event);
},