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 freezing page in Preact

See original GitHub issue

Description

The Popover freezing page when used with Preact.

Link to Reproduction

https://github.com/OguzhanE/chakraui-popover-preact-issue/blob/master/src/routes/home/index.js

Steps to reproduce

Use basic example of <Popover /> in the docs.
Page is freezing instead rendered successfully

Chakra UI Version

1.6.5

Browser

Google Chrome 91

Operating System

macOS
Windows
Linux

Additional Information

Any <Popover/> does not render and causing crash in page. Apparently, it gets into infinite render. Link to reproduction can be found in the home page in this repo

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:10 (1 by maintainers)

Top GitHub Comments

1reaction

mjgeracecommented, Feb 16, 2022

@segunadebayo I have pinpointed the exact issue, here: https://github.com/mjgerace/chakra-ui/blob/main/packages/popover/src/use-popover.ts#L418:L420

I don’t know what this setHasBody(!!node) does, but it causes an infinite render cycle with preact. Changing line 418 to ref: ref fixes the infinite loop - as an added bonus, popover seems to work fine. Could you PR a fix for this? I lack context on why setHasBody is needed.

Edit: to be clear, I believe that any of the setHas methods will cause this - my component only uses a <PopoverContent><PopoverBody/></PopoverContent> structure, which is why I called this one out.

0reactions

TheThirdRacecommented, Jul 31, 2022

Just preventing the stale bot…

Top Results From Across the Web

Antd Popover freezes the application as I hover - Stack Overflow

My app and Popover were running just fine but when I updated react app to version "^18.0.0-rc.3" from that day on, this problem...

Demos & Examples - Preact

This pages lists a bunch of demos and examples you can use to learn Preact. 💁 Built one of your own? Add it!...

Preact | Forem Docs

We have a Preact <ColorPicker /> component which offers both a popover color ... When the page loads, we asynchronously find these plain...

How to Fix a Freeze Between React Pages Swap - Qovery

It seems like it's exactly what's happening here. The browser freezes everything while it is striving to render and paint this big new...

Popover freezing page in Preact - chakra-ui ... - Devscope.io

The Popover freezing page when used with Preact. Link to Reproduction. https://github.com/OguzhanE/chakraui-popover-preact-issue/blob/master/src/routes/home ...