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.

Sign up for GitHub

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

Jump to bottom

Click interactions with moving mouse pointer are not recognised #748

Closed
3 tasks
Dosant opened this issue Jul 13, 2020 · 3 comments · Fixed by #848
Closed
3 tasks

Click interactions with moving mouse pointer are not recognised #748

Dosant opened this issue Jul 13, 2020 · 3 comments · Fixed by #848
Assignees
@nickofthyme
Labels
bug Something isn't working :interactions Interactions related issue released Issue released publicly

Comments

@Dosant
Copy link

Dosant commented Jul 13, 2020 •
edited
Loading

Describe the bug
Looks like onElementClick event works only if pointer position during mousedown event is the same as during mouseup event. If mouse pointer is moved during click, then onElementClick interaction isn't firing. This seems to be different from native browser behaviour, where click events are still recognised if mouse pointer is moved. This difference makes clicks in elastic charts flaky when using a mouse, because start-end positions could be different when clicking while the mouse in motion.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://elastic.github.io/elastic-charts/?path=/story/interactions--sunburst-slice-clicks
  2. Mousedown in one of the slices.
  3. Slightly change pointer position, leaving the mouse in the same slice
  4. Mouse up
  5. See onElementClick didn't fire

Expected behaviour
OnElementClick interactions fires

Version (please complete the following information):

  • OS: Mac
  • Browser: Chrome 83
  • Elastic Charts: 27.0.0

Additional context

Noticed while working in a kibana dashboard.

Kibana Cross Issues
Add any Kibana related issues here.

  • TODO.. didn't create issue, but it is relevant

Checklist
Delete any items that are not applicable to this issue.

  • every related Kibana issue is listed under Kibana Cross Issues list
  • kibana cross issue tag is associated to the issue if any kibana cross issue is present
@Dosant Dosant added bug Something isn't working :interactions Interactions related issue labels Jul 13, 2020
@streamich
Copy link

Happens when using Apple's Magic Mouse, e.g. on fast clicking clicks are not recognized.

@Dosant Dosant mentioned this issue Jul 13, 2020
Merged
2 tasks
@markov00
Copy link
Member

As noted by @Dosant we are not using directly the browser capabilities for click because we need to handle both dragging and click cases separately and we handle mouse events in redux.
If we detect a mouse down followed by a mouse up without a mouse move event in between we then configure this as a click, with a mouse move in between instead is a drag event for us.
What we can do is to check if the time between mouse-down and mouse-up is below a certain threshold we can consider it as a click also if there was a movement in between.

@nickofthyme nickofthyme self-assigned this Sep 15, 2020
@Zacqary Zacqary mentioned this issue Sep 17, 2020
Merged
1 task
markov00 added a commit to markov00/elastic-charts that referenced this issue Oct 5, 2020
@markov00
fix(interactions): recognize drag action only after 100ms
0304f50 
This fix reduce the situation where a click is not recognized and instead a drag event is detected.
Adding a 100ms threshold allows a better click handling on situation where a mouse move event occurs
during a mouse click

fix elastic#748
@markov00 markov00 mentioned this issue Oct 5, 2020
Merged
1 task
markov00 added a commit that referenced this issue Oct 6, 2020
@markov00
fix(interactions): recognise drag after 100ms and 4px (#848)
70626fe 
This fix reduces the situation where a drag event is fired instead of a click one. It adds the following thresholds:
- a 100ms threshold before the mouse-down time and the current time to consider the movement for dragging purposes
- a 4-pixel delta between mouse-down and the current position  to consider the movement for dragging purposes

fix #748
markov00 pushed a commit that referenced this issue Oct 6, 2020
@semantic-release-bot
chore(release): 23.2.0 [skip ci]
0fa084d 
# [23.2.0](v23.1.1...v23.2.0) (2020-10-06)

### Bug Fixes

* **heatmap:** adjust pageSize based available chart height ([#849](#849)) ([9aa396b](9aa396b))
* **heatmap:** destroy canvas bbox calculator when done ([#844](#844)) ([42460bd](42460bd))
* **heatmap:** x-axis labels overlapping for time series data ([#850](#850)) ([9ebd879](9ebd879))
* **interactions:** recognise drag after 100ms and 4px ([#848](#848)) ([70626fe](70626fe)), closes [#748](#748)

### Features

* heatmap tooltip enhancements and fixes ([#847](#847)) ([d879e05](d879e05))
@markov00
Copy link
Member

markov00 commented Oct 6, 2020

🎉 This issue has been resolved in version 23.2.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Oct 6, 2020
@neptunian neptunian mentioned this issue Feb 23, 2021
Closed
7 tasks
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this issue Feb 10, 2022
@semantic-release-bot
chore(release): 23.2.0 [skip ci]
734535a 
# [23.2.0](elastic/elastic-charts@v23.1.1...v23.2.0) (2020-10-06)

### Bug Fixes

* **heatmap:** adjust pageSize based available chart height ([opensearch-project#849](elastic/elastic-charts#849)) ([fd56099](elastic/elastic-charts@fd56099))
* **heatmap:** destroy canvas bbox calculator when done ([opensearch-project#844](elastic/elastic-charts#844)) ([4c1fd55](elastic/elastic-charts@4c1fd55))
* **heatmap:** x-axis labels overlapping for time series data ([opensearch-project#850](elastic/elastic-charts#850)) ([7cbd151](elastic/elastic-charts@7cbd151))
* **interactions:** recognise drag after 100ms and 4px ([opensearch-project#848](elastic/elastic-charts#848)) ([f7aa7f8](elastic/elastic-charts@f7aa7f8)), closes [opensearch-project#748](elastic/elastic-charts#748)

### Features

* heatmap tooltip enhancements and fixes ([opensearch-project#847](elastic/elastic-charts#847)) ([6d763fb](elastic/elastic-charts@6d763fb))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nickofthyme nickofthyme

Labels
bug Something isn't working :interactions Interactions related issue released Issue released publicly
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(interactions): recognise drag after 100ms and 4px markov00/elastic-charts
4 participants
@markov00 @Dosant @streamich @nickofthyme