Dropdown closes on scroll

[JEkedorff]

To replicate (I'm using Chrome Version 56.0.2924.87):

1. Open the dropdown as usual.
2. Move the mouse to the scrollbar without leaving the dropdown list. I.e. move the mouse down to the first option, and then go right until the scroll bar is reached. Do NOT go outside the dropdown div.
3. The dropdown does now closes when you start scrolling.

At appears like Chrome triggers the mouseleave event when entering the scrollbar, while Firefox don't.
To avoid removing the "hover"-class, I solved it by limiting the mouseleave-event to only trigger when leaving the complete control, instead of trigger when leaving each dropdown list item.

Old code (jQuery):

_mouseleave: function(e) {
        toggleClass(this.el, 'hover', false);
}

New code (jQuery):

_mouseleave: function(e) {
	if(e.fromElement == this.el) //dont trigger mouseleave when leaving list item => entering scrollbar
	{
		toggleClass(this.el, 'hover', false);
	}
}

[jbrunette]

This occurs in IE 11 as well (I was investigating this very thing and was about to create an issue).

Step 3 above should say "The dropdown now closes when you mousedown on the scrollbar". Mousewheel scrolling doesn't trigger the issue.

4/14/2017:
This doesn't occur in Firefox because FF doesn't blur a focused input element if a scroll bar is clicked. The input's blur event triggers the closing of the dropdown.

[arendjr]

Thanks for the detailed report! It has just been fixed in the master branch.

[JEkedorff]

Thank you for a great job!

[JEkedorff]

Hi again,

The fromElement-property seem to not be very cross-browser compatible.
This means my suggested code makes the dropdown stay open when bluring input in FF (i.e. opposite problem of before...)

I believe I have solved it by using the relatedTarget-property instead:

_mouseleave: function(event) {

	if(event.relatedTarget == null || (event.relatedTarget != this.el && event.relatedTarget.parentElement != this.el && this.dropdown && event.relatedTarget.parentElement != this.dropdown.el ))
	{
		toggleClass(this.el, 'hover', false);
	}

	//nicer solution, but requires jQuery for find-function
	/*if((jQuery)(this.el).find(event.relatedTarget).length == 0) {
		toggleClass(this.el, 'hover', false);
	   }*/
}