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][V1] Popover trigger render on scroll

See original GitHub issue

Bug report

Describe the bug

If I have a popover on the page every time I scroll the popover rerender.

To reproduce

Scroll the page and you will see the counter increase.

Minimal reproduction

codesandbox

Expected behavior

Do not trigger rerender on scroll.

System information

Version of @chakra-ui/core: [e.g. 1.0.0-rc.7]

Issue Analytics

State:
Created 3 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

TimKolbergercommented, Oct 24, 2020

chakra-ui handles the visibility of the Tooltip/Popover/etc with useDisclosure and animate the transition on our own with motion. react-popper does not know if its content is visible or not, and rerenders always.

To fix this issue react-popper needs the functionality to stop updating its styles if the using side (e.g. chakra-ui) does not need the update to happen.

More context:

Usage of `usePopper` (renamed to `useBasePopper`) in chakra-ui

https://github.com/chakra-ui/chakra-ui/blob/54ff9e8105fdce379059b4480203143309ef4aef/packages/popper/src/use-popper.ts#L127-L131

rerenders on scroll

Replace popperJS with a mock

const popperJS = { attributes: {}, styles: {} } as any

does NOT rerender on scroll

I tried setting the referenceNode and popperNode conditionally to null, if the content is not visible, but it led to awkward behaviour.

Source of the rerender in `usePopper` in react-popper

The setState call triggers the rerender:

https://github.com/popperjs/react-popper/blob/68a992c07dc145935acbe682fa496f888136e55c/src/usePopper.js#L52-L72

1reaction

ljosberinncommented, Oct 24, 2020

PopoverContent seems to be the issue here, even without anything in there it rerenders on scroll. This may already be fixed due to the migration to usePopper, gotta check.

Edit: dug a bit, usePopper didn’t help. The rerenders aren’t as bad, only ~ 0.5ms - 1.5ms per Popover, but thats still entirely unneeded so we’ll investigate.

Top Results From Across the Web

React-boostrap Popover not stay with button on scroll container

Expected behavior. A popover should stay with a button element instead of scrolling container. A clear and concise description of what you ...

Popovers · Bootstrap v5.0

Popovers can be triggered thanks to an element inside a shadow DOM. By default, this component uses the built-in content sanitizer, which strips...

Popover - Close On Scroll ⋅ Storybook

Name Description Default placement Where popover should show it's content top withArrow Whether show popover arrow or not true initialIsOpen Whether popover visible on init or...

Changelog - Chakra UI

This improves the render and scroll performance when you use many popper-related items. Affected components: Menu, Popover and Tooltip ...

Popovers - React-Bootstrap

#Positioned popover components in scrolling container ; container · {this} ; trigger · "click ; placement · "left ; overlay · {popoverLeft} ...