Skip to content

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

@ksy36

Description

@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:

60096051-aef94a00-9758-11e9-9987-d7ec551f5c7a

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:

jcf/js/jcf.js

Lines 166 to 170 in d002e9f

if (!e.pageX && !e.pageY) {
touchEventData = origEvent.changedTouches ? origEvent.changedTouches[0] : origEvent;
e.pageX = touchEventData.pageX;
e.pageY = touchEventData.pageY;
}

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions