Skip to content
Permalink
Browse files

Draggable: active element blurs when clicking on a draggable. Fixes #…

…4261 - Draggable: Inputs do not blur when clicking on a draggable
  • Loading branch information
Steven Luscher authored and mikesherov committed May 1, 2013
1 parent bca3e05 commit fcd1cafac8afe3a947676ec018e844eeada5b9de
@@ -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"
};
@@ -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 );
@@ -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
*/
@@ -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;

6 comments on commit fcd1caf

@johnnyshields

This comment has been minimized.

Copy link

@johnnyshields johnnyshields replied Aug 27, 2013

@steveluscher @mikesherov the change to jquery.ui.draggable.js caused this regression issue: http://bugs.jqueryui.com/ticket/9520

@steveluscher

This comment has been minimized.

Copy link
Contributor

@steveluscher steveluscher replied Aug 27, 2013

You're kidding? Blurring the active element causes the browser window to change stacking order on IE9? I can hardly believe it, but then again…

@johnnyshields

This comment has been minimized.

Copy link

@johnnyshields johnnyshields replied Aug 27, 2013

This is quite a cynical interpretation of the JS spec by Microsoft. Why would anyone need the browser window to "blur" with respect to other OS windows??

@tjvantoll

This comment has been minimized.

Copy link
Member

@tjvantoll tjvantoll replied Aug 27, 2013

You're kidding? Blurring the active element causes the browser window to change stacking order on IE9? I can hardly believe it, but then again…

@steveluscher Only if document.activeElement is the <body>, but yeah, insanity. It happens in IE10 as well.

@steveluscher

This comment has been minimized.

Copy link
Contributor

@steveluscher steveluscher replied Aug 27, 2013

@guidobouman

This comment has been minimized.

Copy link

@guidobouman guidobouman replied Apr 8, 2014

A simple check if the active element is within the draggable scope would do?

Please sign in to comment.
You can’t perform that action at this time.