c3js / c3js/c3

Onclick event does not trigger on iPhones and iPads

Open
#2,509 3 comments 4 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.