RAC Popover cannot be conditionally rendered via controlled props
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
### Provide a general summary of the issue here
Popover will not render via a variable outside of its internal scope. I need to be able to control the open state of the popover so i can use framer motion to animate the entry/exit animation of the component. This is currently impossible.
### 🤔 Expected Behavior?
Popover should be able to be conditionally rendered outside of its internal state.
### 😯 Current Behavior
A simple wrapper over the Popover works perfectly fine, however when a predicate is set outside of the component to determine if it should render or not, it never renders. in fact the open/onOpenChange state never changes. In the code sample below, the issue is the `state?.isOpen` predicate. Even in the absence of framer motion, this predicate prevents the popover from rendering at all. The popover itself is permanently set to true so framer motion can control the entry/exit animation. Code sandbox is provided below.
```typescript
{state?.isOpen && (
{props.children}
)}
```
### 💁 Possible Solution
No idea. ive mixed and matched context and state till ive been blue in the face.
### 🔦 Context
The original discussion that sparked this issue can be found at #5947. I originally thought the issue was due to something framer motions AnimatePresence was doing. however on further inspection the issue persists even without any framer motion involvement.
### 🖥️ Steps to Reproduce
Ive provided a sandbox that was also referenced in the original discussion [here](https://codesandbox.io/p/sandbox/gallant-marco-jdqncg?file=%2Fsrc%2Findex.js&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clvoglbok0006356ilfhjrooc%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clvoglbok0002356imayh9uic%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clvoglbok0003356i4acdamnu%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clvoglbok0005356iwf6vpyyn%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clvoglbok0002356imayh9uic%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvoglboj0001356i1yeqhtuc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clvoglbok0002356imayh9uic%2522%252C%2522activeTabId%2522%253A%2522clvoglboj0001356i1yeqhtuc%2522%257D%252C%2522clvoglbok0005356iwf6vpyyn%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clvoglbok0004356iwtnkfjet%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clvoglbok0005356iwf6vpyyn%2522%252C%2522activeTabId%2522%253A%2522clvoglbok0004356iwtnkfjet%2522%257D%252C%2522clvoglbok0003356i4acdamnu%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clvoglbok0003356i4acdamnu%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)
### Version
1.2.0 (RAC)
### What browsers are you seeing the problem on?
Chrome
### If other, please specify.
_No response_
### What operating system are you using?
Windows 11
### 🧢 Your Company/Team
_No response_
### 🕷 Tracking Issue
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.