mapbox / mapbox/mapbox-gl-js

long-tap context menu event on mobile chrome delayed by a click

Open
#4,334 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug :lady_beetle: environment-specific :desktop_computer:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**v0.32.1**:

### Steps to Trigger Behavior

1. Open [jsfiddle](https://jsfiddle.net/7Lfwbkpb/2/) (on Chrome 56.0.2924.87)
2. This only reproduces itself on a mobile browser, so launch the dev tools (Ctrl-Shift-i or right-click->Inspect)
3. Pick a mobile device (I use Nexus 5):

### Expected Behavior
long tap on map should trigger the alter dialog registered on "contextmenu" event.

### Actual Behavior
long tap and subsequent tap trigger the dialog.

### Motivation
I am trying to reconcile the event handling among browsers and of course they all behave differently.
so far my code registered on long taps manually:

`

"mousedown" : function(e) {
clearTimeout(triggerTimout);
triggerTimout = setTimeout(function() {
e.latlng = e.lngLat;
cb(e);
}, 1000);
},
"mousemove" : function(e) { clearTimeout(triggerTimout); },
"mouseup" : function(e) {
clearTimeout(triggerTimout);
}
`

but that doesn't work on FF (does on Safari and Chrome) - FF never relays "mousedown" events if they part of a long-tap.
changing to touch events hampers my dev enviroment;
"contextmenu" works well on FF, but not on chrome.

This is of course quite nighmare-ish - but mapboxgl [does issue](https://github.com/mapbox/mapbox-gl-js/blob/b9e10b939c6a3fe5d7ecac209f751b4871970ede/src/ui/bind_handlers.js#L54) "contextmenu" events and it doesn't look like it does this correctly in the circumstances described.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the contextmenu handling in src/ui/bind_handlers.js, then reproduce the jsfiddle case using Chrome mobile emulation and the reported Nexus 5 profile. Compare long-tap behavior with the expected immediate dialog and the delayed click-triggered dialog; done means the event behavior is reconciled without breaking the Firefox and Safari cases described.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.