Selection popup dissapears after clicking on dropdown element in Firefox on mobile

[ksy36]

I came across an issue on https://www.sleeper.scot/ that is happening in Firefox on mobile device. When trying to select an option in one of the dropdowns the selection popup dissapears:

Here is a reduced test case: https://codepen.io/anon/pen/dBzmbm

Note that this is only happening when a page is scrolled. The problem seems to be with mouseEventSimulated not detecting the simulated mouse event in Firefox. It all starts from the following condition:

https://github.com/w3co/jcf/blob/d002e9f5a10cb386089f58592abca4a01edc9518/js/jcf.js#L166-L170

When the page is scrolled, Both pageX and pageY properties exist in the event in Firefox, and also when the page is scrolled pageY is not 0, so the logic inside the above function never gets executed.

Apparently it causes some issues later on with x an y properties of lastTouch, so mouseEventSimulated returns undefined

if (origEvent.type === 'touchend') {
	lastTouch = { x: e.pageX, y: e.pageY };
}

var mouseEventSimulated = function(e) {
		var dx = Math.abs(e.pageX - lastTouch.x),
		      dy = Math.abs(e.pageY - lastTouch.y),
		      rangeDistance = 25;
			
			if (dx <= rangeDistance && dy <= rangeDistance) {
				return true;
			}
};

As a result the first condition resolves in false, causing dispatching of mouse events and I think that what's closing a closure of the popup:

if (e.pointerType === 'mouse' && lastTouch && mouseEventSimulated(e)) {
	return;
} else {
	return ($.event.dispatch || $.event.handle).call(this, e);
}

I'm not sure why if (!e.pageX && !e.pageY) { is being used, but thinking replacing it with: if (origEvent.type === 'touchend') would make sense, since lastTouch is being set only for the touchend event. I've tried that and it fixes the issue for me.

Would appreciate you thoughts on that. If that sounds like a reasonable idea I can make a PR with a fix.

[ksy36]

Thanks for looking into this!