Popover version 1.0.0 is behind some content

[skarensmoll]

Hi there!

I was hoping you could help me understand this issue I am getting, I just updated my popover to the newest version, but got this side-effect, seems like the z-index is auto now, hence, other elements are taking priority which was not the case before.

The red text you are seeing has a z-index of 1, and it is place somewhere above in a different container from where the popover is; is there any prop I am missing?

Any help is really appreciated!

thanks a lot

[jjenzz]

Did you see the breaking changes for this component in the release notes? It sounds like you are missing the Popover.Portal part.

[skarensmoll]

Thanks a lot for the quick reply, May I suggest to include this as part of the documentation, for the new portal tag?

To avoid regressions, use this part if you want portalling behavior. The z-index isn't managed so you have full control of layering.

[benoitgrelard]

It wouldn't make sense to put this in the docs for the part itself as this was a change over time. That's what changelogs are for. For a new person starting from now, they wouldn't experience this transition, ie. they wouldn't know or expect that at one point in the past the z-index was indeed managed for them, so naturally they would set their own.

[hipstersmoothie]

Are there any suggestions on how to manage z-index now that I do have full controls. For example if I have a dialog rendering a menu before they all had max z-index so menus inside the dialog would render on top of the dialog. Now that I have full control I'm trying to have "layers" for each component but this leads to menus rendering inside dialogs to actually go behind because on the z-indexes.

I can set all my z-index back to high equal numbers but this seems wrong. Am I supposed to use context to increase z-index? I'm a little lost as to how to approach this in a flexible way

[benoitgrelard]

My best advice would be to avoid z-index alltogether as much as possible and instead rely on the mounting order in the node which will do the right thing, providing that you create a new static context for your top-level app wrapper (given that the portals are mounted outside of the app root, but inside document.body).