-
-
Notifications
You must be signed in to change notification settings - Fork 227
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.
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
Does not work with v1.14.2 of Popper.js #122
Comments
I'm seeing the same issue. All the correct styles are being passed down to my popper component and I can see a flicker where it's correctly positioned for a split second, but then Popper.js seems to overwrite the values. |
Created a smaller case here using react-popper directly: https://github.com/TLadd/popper-test
Locking popper.js to 1.14.1 renders correctly. |
We started seeing this issue as well with the latest version of |
I'm not sure what's the right way to fix this... Within Popper.js we need to reset those styles instantly to properly get some measurements, but doing so @atomiks do you think could we reset those styles only when the update is triggered by a resize event? This would at least reduce the problem but I'm not sure if it would fix it completely. |
More details here: floating-ui/react-popper#122
I wonder if react-popper should clone the styles when the data is passed to it's modifier since Popper.js seems to mutate the values of the styles. That way it has its own copy of the most recent styles. Or is it too late by the time the modifiers run? |
@TheSharpieOne I don't think that would work since Popper.js modifies the DOM directly. |
I don't think there's anything that react-popper can do |
@FezVrasta I think that as long as react-popper can re-apply the styles after the DOM styles has been removed by Popper.js it should be fine. Could Popper.js perhaps add a hook that is run whenever the styles would be applied regularily? |
Oh, I see, react-popper is applying the styles correctly, but after the render Popper.js does its modification directly to the DOM. Wouldn't that affect more than react-popper's usage, or is it because react-popper has applyStyles set to false? |
More details here: floating-ui/react-popper#122
More details here: floating-ui/react-popper#122
May you guys test this version and tell me if it fixes your problem? |
Pulled and linked the popper.js branch down and it does fix the problem I was seeing. |
Great! Going to release it soon |
More details here: floating-ui/react-popper#122
@FezVrasta by soon do you mean today? :) |
Thanks @FezVrasta, that was a quick fix! 🎉 |
@FezVrasta Thanks a lot! I spent several hours today trying to figure out the reason it broke, and you already fixed it, that was fast |
You're welcome! And with this, thanks to @atomiks, we also fixed a long standing bug that almost made Popper.js useless 😅 |
Sorry for the fix breaking everyone's projects 😞, at least now we've fixed the long-standing issue and thankfully react-popper could also be fixed. |
@atomiks I'm out of the loop here, can you please point me to the issue you fixed in 1.14.2? Just curious |
@grumd see floating-ui/floating-ui#251 Basically the popper would overflow the document boundaries on resize and more critically on update if the reference was close to the edge, causing it to not show fully. (Update the CodePen to use 1.14.1 to see the difference when resizing the browser window) |
CodePen demo
I could for some reason not get it to show the error in the codepen when I tried earlier. Not sure exactly why.
But you can see the error here: https://reactstrap-error-tooltip.firebaseapp.com/
And the git repo is here: https://github.com/Maistho/reactstrap-tooltip-error
(I don't have the time right now, but I will try to create a new example that works in the codepen and without reactstrap tomorrow)
Steps to reproduce the problem
What is the expected behavior?
Tooltip should appear in correct position
What went wrong?
Seems like Popper.js changes the DOM after react-popper has written styles, and by doing that it overwrites the styles (but doesn't add them after)
Any other comments?
See this issue for more information: reactstrap/reactstrap#938
And it's definitely related to this piece of code: floating-ui/floating-ui@7bfdedf
The text was updated successfully, but these errors were encountered: