parentElement doesn't work

[alexzhou-chata]

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!

[lagroms]

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.

[lagroms]

I actually figured it out, I guess the documentation is not updated. I attached a ref to the parent element where I want the popover to be appended to, and pass it to the popover Component in the "containerParent" prop.

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>

[alexkatz]

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.