new(tooltip, xychart): force update TooltipInPortal bounds #1045
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 Enhancements
This PR fixes an issue with
XYChart
'sTooltip
described in #983, whereTooltip
position does not correctly update when the chart container changes position due to limitations withreact-use-measure
(note that position does update upon page scroll or container resize). It's not obvious how to fix this withIntersectionObserver
, etc. so I used a relatively simple approach:react-use-measure
'sforceRefreshBounds
function in the@visx/tooltip
useTooltipInPortal
hook, which will force update theTooltip
container boundsforceRefreshBounds
whenever@visx/xychart
'sTooltip
goes from theunopen => open
stateCloses #983.
Before
In this case, the chart animates in from the left so the
Portal
thinks its bounds are way left/off screen until I scroll, at which pointreact-use-measure
updates the position and the tooltip is correctly positioned; see #983 for a different example with drag & dropAfter
Tooltip has correct position from the outset
@kristw @hshoff
cc @valtism