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: Fix IE/Edge scrolling issues

Browse Source 
IE11 and scrolling autocompletes didn't get along great; this should help fix
their relationship.

When you click on an autocomplete scrollbar in IE11, the menu temporarily
gains focus, which caused a couple problems.

1. Depending on how long you clicked, the dropdown could close.

2. Scrolling down by clicking the scrollbar's down arrow would misbehave. The
list would pop back up to the top with the first item selected.

We can fix both problems by modifying the focus/blur handling a bit.

1. There is a flag to instruct the control to ignore blurs, but it was getting
cleared too quickly; when the code refocused the input after it was blurred,
IE would send *another* blur event, which wasn't getting ignored and would
close the dropdown. We now wait for the focus/blur pair to process before
clearing the flag.

2. We remove the tabindex from the dropdown menu, which prevents menu's focus
handler from firing. When you focus a menu, it will select the first menu item
if none are selected. Selecting a menu item will scroll it into view if it's
not visible. This combination of behaviors was causing the strange behavior
when attempting to scroll down.

I couldn't figure out a way to write a unit test for this, since it's IE only
and seems to require user interaction. You can verify the previous behavior
(and the fix) on `demos/autocomplete/maxheight.html`

Fixes #9638
Closes gh-1785
This commit is contained in:
Ryan Oriecuia 2017-01-12 11:16:20 -08:00 committed by Scott González
parent 4b9f32486c
commit 573e7e69c9
1 changed files with 11 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/widgets/autocomplete.js
View File

@ -200,11 +200,6 @@ $.widget( "ui.autocomplete", {
this.previous = this._value(); this.previous = this._value();
}, },
blur: function( event ) { blur: function( event ) {
if ( this.cancelBlur ) {
delete this.cancelBlur;
return;
}
clearTimeout( this.searching ); clearTimeout( this.searching );
this.close( event ); this.close( event );
this._change( event ); this._change( event );
@ -220,31 +215,24 @@ $.widget( "ui.autocomplete", {
role: null role: null
} ) } )
.hide() .hide()
// Support: IE 11 only, Edge <= 14
// For other browsers, we preventDefault() on the mousedown event
// to keep the dropdown from taking focus from the input. This doesn't
// work for IE/Edge, causing problems with selection and scrolling (#9638)
// Happily, IE and Edge support an "unselectable" attribute that
// prevents an element from receiving focus, exactly what we want here.
.attr( {
"unselectable": "on"
} )
.menu( "instance" ); .menu( "instance" );
this._addClass( this.menu.element, "ui-autocomplete", "ui-front" ); this._addClass( this.menu.element, "ui-autocomplete", "ui-front" );
this._on( this.menu.element, { this._on( this.menu.element, {
mousedown: function( event ) { mousedown: function( event ) {
// prevent moving focus out of the text field // Prevent moving focus out of the text field
event.preventDefault(); event.preventDefault();
// IE doesn't prevent moving focus even with event.preventDefault()
// so we set a flag to know when we should ignore the blur event
this.cancelBlur = true;
this._delay( function() {
delete this.cancelBlur;
// Support: IE 8 only
// Right clicking a menu item or selecting text from the menu items will
// result in focus moving out of the input. However, we've already received
// and ignored the blur event because of the cancelBlur flag set above. So
// we restore focus to ensure that the menu closes properly based on the user's
// next actions.
if ( this.element[ 0 ] !== $.ui.safeActiveElement( this.document[ 0 ] ) ) {
this.element.trigger( "focus" );
}
} );
}, },
menufocus: function( event, ui ) { menufocus: function( event, ui ) {
var label, item; var label, item;