Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Autocomplete: Fix IE/Edge scrolling issues
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
- Loading branch information
573e7e6
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @AttackTheDarkness I am totally new to the github. Forgive If this is silly question. May I know this autocomplete.js for Jquery-UI released version details. I've tried 1.12.1 version of JQuery-UI. But I can't find this fix there. I got this issue in IE and it sucks me.
573e7e6
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@roudhran it is not included, because latest release is from 14.9.2016 https://github.com/jquery/jquery-ui/releases and this commit is from 2017. Maybe you have to build jquery-ui for your self.
573e7e6
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @AttackTheDarkness , I have made the changes in my local v1.12.1, issue is resolved for IE but facing an issue in Edge. The autocomplete menu is getting closed on clicking the top⯅/bottom⯆ icons in the scroll bar.
Do we have any fix for the same ?
573e7e6
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No. The previous problem was from the menu's blur handler firing when the scroll bar was used, so it's probably the same root cause. You can try setting a breakpoint in the
blur
handler and figuring out why it's firing, and trying an alternate approach. The above code uses theunselectable
attribute which might have changed in later versions of Edge, try Googling around that and seeing if you get any insights.