Search code examples
reactjsreact-bootstrapbootstrap-popover

Change react-bootstrap OverlayTrigger Popover's content while displayed

I am using react-boostrap's Popover with the OverlayTrigger class. My issue is that when I change the content on the Popover while it is displayed, it is properly resized but the position gets wrong. The popover maintains its top left corner position even if it is not aligned anymore with the OverlayTrigger

Here is what I am talking about:

enter image description here enter image description here

Here is the code I am using in my render function, it's pretty straightforward:

const popover = (
        <Popover id={this.props.htKey} >
            {this.state.content}
        </Popover>
);

return (
            <OverlayTrigger
                trigger={["hover", "focus"]}
                delayShow={200}
                placement="top"
                overlay={popover}
                onEntered={this.startExtendTimer}
                onExited={this.resetContent}
            >
                <span>test</span>
            </OverlayTrigger>


 );

The startExtenTimer calls a timeout that changes this.state.content after a few seconds (therefore resulting in the issue that I show on the picture)

How can I change the content of the popover while keeping the correct alignment?

Solution

  • I found a solution here:

    Similar question: https://github.com/react-bootstrap/react-bootstrap/issues/1438

    Answer: https://github.com/react-bootstrap/react-overlays/pull/42

    You can basically add a shouldUpdatePosition props to a Overlay component. 

    <Overlay ... shouldUpdatePosition={true}  >

    My current issue with it is that I have an ugly delay before the repositioning. I am looking into it and will update if I found a solution

    UPDATE: To remove this delay, I just had to immediately re-render the component holding the Overlay when the said overlay content get updated.