✨ (grapher) prevent scrolling while showing tooltips / TAS-528

[sophiamersmann]

Line charts and stacked area charts listen to move events on mobile to show a tooltip, but don't prevent scrolling, which makes the experience of interacting with the tooltip a bit jumpy (see video below).

This PR makes it so that scrolling is disabled when interacting with the chart area.

Implementation detail: All React event listeners are by default passive, which means that calling event.preventDefault() has no effect. That's why we need to attach the event listener to the DOM ourselves (technically, only the move event needs this but I moved them all to the componentDidMount method so that they're all defined in the same place)

line-tooltips.mov

[sophiamersmann]

• 🎉 (grapher) add a globe view / TAS-516 #3589
• ✨ (grapher) fixed tooltip position on mobile / TAS-520 #3679
• ✨ (grapher) prevent scrolling while showing tooltips / TAS-528 #3678 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-mobile-tooltips-prevent-scrolling

• Site-screenshots: https://github.com/owid/site-screenshots/compare/mobile-tooltips-prevent-scrolling
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/mobile-tooltips-prevent-scrolling

SVG tester:

Number of differences (default views): 1342 (9e2931) ❌
Number of differences (all views): 685 (1f9cfe) ❌

Edited: 2024-06-24 09:05:23 UTC
Execution time: 1.26 seconds

[notion-workspace]

Prevent scrolling when interacting with tooltips

[danyx23]

Ah interesting, I didn't know that about react event handlers. This looks good and seems to work as advertised but I lack the expertise to know if there are any potential issues with this. I think you can safely merge this but if you want a review from someone who understands this stuff better then ping Martin :)

[rakyi]

I haven't done this exact thing before myself, so I'm not sure if there are any gotchas hiding here. However, I know there is a great library for floating elements I used before that has a component for this.

Is there a chance that whatever we are already using for tooltips has something built-in as well? Otherwise, there is also react-remove-scroll in case we are not happy with what we did now, or we need a more reusable/battle tested solution.

[sophiamersmann]

Thanks for your reviews! This is good to go but I want to ship it in concert with follow-up PRs, so closing it for now, but will be continued...