search

instacart / Snacks

The Instacart Component Library
https://instacart.github.io/Snacks/
Apache License 2.0
81 stars 36 forks source link

scrollWidth causing incorrect calculatePosition #460

Closed james-carrots closed 3 years ago

james-carrots commented 3 years ago

proposing to change to offsetWidth

james-carrots commented 3 years ago
Screen Shot 2021-07-27 at 10 40 22 AM Screen Shot 2021-07-27 at 10 40 28 AM
james-carrots commented 3 years ago

When this.calculatePosition happens the first time, because we are using scrollWidth, the offset doesn't get calculate properly. The tooltip pops open to the right, and creates more space to the right, and auto scrolls there. (or it may not, depending on OS setting)

james-carrots commented 3 years ago
Screen Shot 2021-07-27 at 10 42 22 AM Screen Shot 2021-07-27 at 10 42 29 AM

*note: the orange blocks are intentionally hardcoded to visualize where the target dom for clicking is

james-carrots commented 3 years ago

Afterwards, when scrollWidth becomes correct, this doesn't happen again. With the wrong scrollWidth, the calculation if block doesn't get triggered.

else if (overlayDistanceFromRightEdge > documentWidth) { https://github.com/instacart/Snacks/blob/master/src/components/Tooltip/TooltipPosition.js#L89

So far in debugging offsetWidth has been the correct width to use to trigger things