fix(tooltip): rendering in react v18#2169
Merged
nickofthyme merged 6 commits intoelastic:mainfrom Sep 19, 2023
Merged
Conversation
- manually append anchor on render - limit calls to getOrCreateNode - upgrade to latest version of @popperjs/core
Collaborator
Author
This reverts commit 9cb48a8.
Collaborator
Author
|
buildkite update screenshots |
Collaborator
Author
|
Slight pixel shift in placement from updated |
markov00
approved these changes
Sep 19, 2023
Collaborator
markov00
left a comment
There was a problem hiding this comment.
It is fine for me, but we probably should consider a way to test the library with react 18
...eenshots/all.test.ts-snapshots/baselines/annotations-lines/advanced-markers-chrome-linux.png
Show resolved
Hide resolved
nickofthyme
pushed a commit
that referenced
this pull request
Sep 20, 2023
# [60.0.0](v59.1.0...v60.0.0) (2023-09-20) ### Bug Fixes * **deps:** update dependency @elastic/eui to ^88.2.0 ([#2161](#2161)) ([6609a19](6609a19)) * **deps:** update dependency @elastic/eui to ^88.3.0 ([#2163](#2163)) ([624f43a](624f43a)) * **deps:** update dependency @elastic/eui to v85 ([#2113](#2113)) ([1b3fa7c](1b3fa7c)) * **deps:** update dependency @elastic/eui to v87 ([#2145](#2145)) ([312c32c](312c32c)) * **deps:** update dependency @elastic/eui to v88 ([#2154](#2154)) ([4070da0](4070da0)) * **tooltip:** rendering in react v18 ([#2169](#2169)) ([f30df54](f30df54)) * update font family ([#2165](#2165)) ([be07b0c](be07b0c)) * **waffle:** remove alpha artifacts ([#2139](#2139)) ([8eb4ede](8eb4ede)) * Wait a tick before reporting render status ([#2131](#2131)) ([fd2bca4](fd2bca4)) * **xy:** disable legend extra on ordinal ([#2114](#2114)) ([3ddfb18](3ddfb18)) ### Features * add locale prop to Settings ([#2164](#2164)) ([0bb3ab1](0bb3ab1)) ### BREAKING CHANGES * **xy:** when using the `ScaleType.Ordinal` for the X scale the legend extra value, representing the last and current hovered value, will not be shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
Fixes issue where tooltip would not render when using
react@^18.Details
Troubleshooting steps:
stylesto theportalNodeelement.styleswere mostly zeros which must be why they didn't apply the styles to the element.portalNodeelement was all zeros including theheightandwidth.mainplayground and the playground usingreact@^v18. I noticed that when the size computation was performed, the current code rendered the tooltip size accurately but thereact@^v18did not show a tooltip at all.portalNodeelement ref from the code and searching for it in the dom, nothing! It was missing.portalNodewas broken.Why??? I have no clue...
I searched the react changelog for changes to
createPortaland saw nothing. But for some reason the old code withreact@^16was able to maintain an active reference to theportaldom node andreact@^18was not.The solution here is to ensure the portal node reference is maintained across re-renders. Before we did so by creating a new portalNode each time but here I simply append the saved reference node to the dom each render.
Issues
fixes #1910
Checklist
:xy,:partition):interactions,:axis)closes #123,fixes #123)