Draggable: active element blurs when clicking on a draggable. Fixes #4261 - Draggable: Inputs do not blur when clicking on a draggable

This commit is contained in:
Steven Luscher 2013-05-01 15:01:32 -07:00 committed by Mike Sherov
parent bca3e058e8
commit fcd1cafac8
4 changed files with 31 additions and 11 deletions

View File

@ -22,16 +22,6 @@ TestHelpers.datepicker = {
var id = $( "<input>" ).appendTo( "#qunit-fixture" );
return TestHelpers.datepicker.init( id, options );
},
onFocus: function( element, onFocus ) {
var fn = function( event ){
if( !event.originalEvent ) {
return;
}
element.unbind( "focus", fn );
onFocus();
};
element.bind( "focus", fn )[ 0 ].focus();
},
onFocus: TestHelpers.onFocus,
PROP_NAME: "datepicker"
};

View File

@ -199,4 +199,20 @@ 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 );
var textInput = $( "<input>" ).appendTo( "#qunit-fixture" ),
element = $( "#draggable1" ).draggable();
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.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" );
start();
});
});
})( jQuery );

View File

@ -175,6 +175,18 @@ TestHelpers.commonWidgetTests = function( widget, settings ) {
});
};
TestHelpers.onFocus= function( element, onFocus ) {
var fn = function( event ){
if( !event.originalEvent ) {
return;
}
element.unbind( "focus", fn );
onFocus();
};
element.bind( "focus", fn )[ 0 ].focus();
};
/*
* Taken from https://github.com/jquery/qunit/tree/master/addons/close-enough
*/

View File

@ -78,6 +78,8 @@ $.widget("ui.draggable", $.ui.mouse, {
var o = this.options;
$( document.activeElement ).blur();
// among others, prevent a drag on a resizable-handle
if (this.helper || o.disabled || $(event.target).closest(".ui-resizable-handle").length > 0) {
return false;