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

Autocomplete: Close the menu on any outside interactions

Browse Source 
This ensures that the menu will close if the user interacts with a
draggable, resizable, etc. element since those interactions don't
change focus.

Ref #6642
Closes gh-1614
This commit is contained in:
Scott González 2015-10-15 10:11:14 -04:00
parent 7df2f1905a
commit 548fbf570c
2 changed files with 47 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
tests/unit/autocomplete/core.js
View File

@ -398,4 +398,28 @@ asyncTest( "Search if the user retypes the same value (#7434)", function() {
} );
} );
asyncTest( "Close on click outside when focus remains", function() {
expect( 2 );
var element = $( "#autocomplete" ).autocomplete( {
source: [ "java", "javascript" ],
delay: 0
} );
var menu = element.autocomplete( "widget" );
$( "body" ).on( "mousedown", function( event ) {
event.preventDefault();
} );
element.val( "j" ).autocomplete( "search", "j" );
setTimeout(function() {
ok( menu.is( ":visible" ), "menu displays initially" );
$( "body" ).simulate( "mousedown" );
setTimeout(function() {
ok( menu.is( ":hidden" ), "menu closes after clicking elsewhere" );
start();
} );
} );
} );
} );

41
ui/widgets/autocomplete.js
View File

@ -245,24 +245,6 @@ $.widget( "ui.autocomplete", {
this.element.trigger( "focus" );
}
} );
// Clicking on the scrollbar causes focus to shift to the body
// but we can't detect a mouseup or a click immediately afterward
// so we have to track the next mousedown and close the menu if
// the user clicks somewhere outside of the autocomplete
var menuElement = this.menu.element[ 0 ];
if ( !$( event.target ).closest( ".ui-menu-item" ).length ) {
this._delay( function() {
var that = this;
this.document.one( "mousedown", function( event ) {
if ( event.target !== that.element[ 0 ] &&
event.target !== menuElement &&
!$.contains( menuElement, event.target ) ) {
that.close();
}
} );
} );
}
},
menufocus: function( event, ui ) {
var label, item;
@ -368,6 +350,20 @@ $.widget( "ui.autocomplete", {
}
},
_isEventTargetInWidget: function( event ) {
var menuElement = this.menu.element[ 0 ];
return event.target === this.element[ 0 ] ||
event.target === menuElement ||
$.contains( menuElement, event.target );
},
_closeOnClickOutside: function( event ) {
if ( !this._isEventTargetInWidget( event ) ) {
this.close();
}
},
_appendTo: function() {
var element = this.options.appendTo;
@ -496,6 +492,10 @@ $.widget( "ui.autocomplete", {
},
_close: function( event ) {
// Remove the handler that closes the menu on outside clicks
this._off( this.document, "mousedown" );
if ( this.menu.element.is( ":visible" ) ) {
this.menu.element.hide();
this.menu.blur();
@ -546,6 +546,11 @@ $.widget( "ui.autocomplete", {
if ( this.options.autoFocus ) {
this.menu.next();
}
// Listen for interactions outside of the widget (#6642)
this._on( this.document, {
mousedown: "_closeOnClickOutside"
} );
},
_resizeMenu: function() {