Popover freezing page in Preact
See original GitHub issueDescription
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 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...
Read more >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!...
Read more >Preact | Forem Docs
We have a Preact <ColorPicker /> component which offers both a popover color ... When the page loads, we asynchronously find these plain...
Read more >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...
Read more >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 ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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 withpreact
. 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.Just preventing the stale bot…