-
Notifications
You must be signed in to change notification settings - Fork 120
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
parentElement doesn't work #159
Comments
Hello, I have the same issue, as the popover is still attached to the body. I don't understand what's to be expected in the parentElement prop. I know the documentation says HTMLElement, but how to I make sure it's a specific div in my code. |
I actually figured it out, I guess the documentation is not updated. const fsRef = useRef(); // initiate ref here
<div className="fullscreen_controls_wrapper" ref={fsRef}> // parent ref here
<div className="fullscreen_controls">
<CustomPopover
isOpen={fsOptionPopover}
onClickOutside={() => setFsOptionPopover(false)}
align={"centre"}
position={["bottom"]}
arrowEnabled={true}
containerParent={fsRef.current} // pass it to the popover component here
element={
<button onClick={() => setFsOptionPopover((prevState) => !prevState)}>
<img src={optionIcon} className="option_icon" alt="more" />
</button>
}
children={
<div className="sys-popover-items" onClick={() => setFsOptionPopover((prevState) => !prevState)}>
<div className="sys-popover-item">
<span className="img-sm">
<img src={audioIcon} alt={"bookmark"} />
</span>
<button onClick={() => alert("save to collection")}>Save to Collection</button>
</div>
</div>
}
/>
</div>
</div> |
Glad you figured it out. I realize the docs weren't very clear, so I've updated them. I'll close this for now, but please open another issue if you're still having trouble. |
Using Version 7.0.1
I set the parentElement to be a proper HTMLElement, but the popover is still appended to document.body
I am using a ClickAwayListener. If I couldn't append the popover to the designated HTMLElement, the ClickAwayListener will be triggered when I click the button on the popover.
Thank you for your help!
The text was updated successfully, but these errors were encountered: