Onclick event does not trigger on iPhones and iPads
- Dominant language
- JavaScript
- Stars
- 9.3k
- Forks
- 1.4k
- Avg merge
- 6d 16h
- Merged PRs (30d)
- 1
Description
### Expected behavior:
The first tap should focus the tapped element and display the tooltip, the second should trigger the html "click" event.
See: [**Figure 6-4** One-finger gesture emulating a mouse](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)
### Steps to reproduce:
1. Open https://jsfiddle.net/zL6bg9kv/ on your iPhone or iPad in Safari, Google Chrome or Firefox.
2. Tap on the Pie chart with one finger. (the clicked element will be focused and the tooltip displayed)
3. Tap again on the same element. (only the position of the tooltip changes)
4. Tap with two fingers. (then the _click_ event triggers and the alert "click" gets displayed [as mentioned here](https://github.com/c3js/c3/issues/687#issuecomment-344606315))
### Issue:
On every mousemove event over the clickable elements in the chart, the content of the tooltip gets regenerated and the old content gets replaced.
Which is not compatible with the Apples one-finger gesture events (see: [**Figure 6-4**](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)) handling and is unnecessary, because this should be only done initially on mouseenter, on mousemove it should only update the position of the tooltip.
* **C3 version**: 0.6.8
* **D3 version**: 5.7.0
* **Browser**: Safari 12; Chrome (70.0.3538.60); Firefox 14.0
* **OS**: IOS 11.4.1; IOS 12.0.1
Contributor guide
Research direction
Start with the linked JSFiddle and reproduce the tooltip behavior on an iPhone or iPad. Trace the chart tooltip's mouseenter and mousemove handling, then verify that the first tap focuses the element and shows the tooltip, the second tap triggers the HTML click event, and mousemove only updates tooltip position.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- d3js, javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100