PopOver component going out of the DOM

[thiruvenkatam]

We have a popover componet that moves out of the root component and gets created as a sibling of the root.

We are not able to find the exact reason of this, as it seems to be working fine in other places of the application, but in a few pages for the first time it renders properly, but from the second time it gets created as a child to the root component.

Can you please let us know on this?

[everweij]

Hi @thiruvenkatam, thanks for reporting this issue. Is there any change you could reproduce this issue and share a codesandbox with me? Please let me know, thanks.

[thiruvenkatam]

Hi @everweij , thanks for your reply. I will try to get you a codesandbox if possible as we are uncertain how this issue showed up. As I had mentioned earlier, the popover works fine in other pages of the application but in a few pages it causes the issue. I will try to get you a reproducible env.

[thiruvenkatam]

https://codesandbox.io/s/react-laag-l0gf9?file=/src/index.js

Here is a sample repo, but this is just a way to simulate the issue. Here in the index.js

<div style={{ overflowX: "hidden", overflowY: "auto", position: "relative" }}>

we have a div with position relative, now when we click to show the popover we see that the popover component is created as a child to the div(with position relative).

Now when we remove the styling and click to show the popover it is created as a sibling to the root div.

Here we are manually removing the style, but in my case even though the class is present, the popover component fails to identify the div with relative position, and gets appended as a sibling to the root div. Hence it is not visible on the screen.

Thanks.

[pigpudle]

same issue

[everweij]

Please update to version 2 (see release-notes for migration steps). I'm confident this issue should be fixed by now. If you're still experiencing problems, please feel free to reopen this issue.