Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
ksy36 opened this issue Jun 26, 2019 · 1 comment · May be fixed by #74
Open

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

ksy36 opened this issue Jun 26, 2019 · 1 comment · May be fixed by #74

Comments

@ksy36
Copy link

ksy36 commented Jun 26, 2019

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.

@ksy36
Copy link
Author

ksy36 commented Oct 14, 2019

Thanks for looking into this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant