Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Popover add unwanted scroll because of PopoverContent position

See original GitHub issue

🐛 Bug report

Hello,

I am currently working with Popover and I found a bug.

When a Popover has not been opened yet, the PopoverContent is misplaced and can cause unwanted horizontal scroll. Once it has been opened, the PopoverContent is placed correctly and everything is normal.

💥 Steps to reproduce

Use a Popover at the right of the window and a scroll will happen.

💻 Link to reproduction

See https://codesandbox.io/s/vigorous-dijkstra-d1s2k, the red block is the PopoverContent and as you can see, I’ve set the Popover placement in left but even so, the content is in bottom-end. Hover the button and the content will be placed correctly.

🧐 Expected behavior

PopoverContent should have the correct position event when it’s not been opened.

🧭 Possible Solution

I found a workaround by setting isLazy to the Popover or by setting the PopoverContent in a Portal but I feel like it’s a hacky fix 🤔

🌍 System information

Software	Version(s)
Chakra UI	1.6.3
Browser	Chrome and Firefox (at least)
Operating System	Mac OS Big Sur

Issue Analytics

State:
Created 2 years ago
Reactions:4
Comments:14 (2 by maintainers)

Top GitHub Comments

14reactions

dlindenkreuzcommented, May 28, 2021

Another workaround: https://codesandbox.io/s/floral-mountain-cvoku?file=/src/App.js

<PopoverContent rootProps={{style: {right: 0}}}>
// or
<MenuList rootProps={{style: {right: 0}}}>

This overrides the absolute position so it doesn’t overflow <body>.

As soon as the Popover or Menu is opened, the override gets overridden again 😜 and everything works as usual.

3reactions

microbit-matt-hillsdoncommented, Jun 4, 2021

I’ve seen what I think is the same change in behaviour here in 1.6.3 which I think is caused by deferring creating the popper.js instance as noted in the release note. So for me, the initial placement caused overflow of a 100vh body height but the placement in 1.6.2 and after interacting with the menu did not.

An example of different behaviour: https://codesandbox.io/s/upbeat-solomon-6vttf