search

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration
https://react.semantic-ui.com
MIT License
13.21k stars 4.05k forks source link

Transitions / Animations losing track of Ref / Context for Popup #3852

Open BensonJ-D opened 4 years ago

BensonJ-D commented 4 years ago

Bug Report

When using Transition components or keyframe webkit animations through CSS, a Popup does not render relative to its context prop, instead rendering in the top left of the window.

Steps

Initially worked by wrapping Popup (with Ref as a Popup Button) in a Transition about 2 months ago, coming back to it recently saw it failing.

Swapped from Transition to TransitionPortal with the same effect. Swapped from TransitionPortal to css keyframes for the same effect.

Expected Result

The Popup should render relative to its context, in this case the button associated with node, during animation.

Actual Result

During animation, the Popup renders in the top left of the screen before jumping to the context once animations have finished.

Version

"react": "^16.8.0",
"react-dom": "^16.8.0",
"semantic-ui-react": "latest"

Testcase

https://codesandbox.io/s/semantic-ui-react-2jlrv

welcome[bot] commented 4 years ago

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.