Change react-bootstrap OverlayTrigger Popover's content while displayed

Question

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:

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?

I added some code but I don't think it helps, it's a very basic script. — Ryan Pergent, Mar 13 '17 at 15:19
react-bootstrap calculates the position when the component is mounted. You would have to somehow trigger a recalculation on your end. Have a look at how the internal code works (react-bootstrap.js:15222) — Chris, Mar 15 '17 at 14:16

Ryan Pergent · Accepted Answer · 2017-03-31T10:39:18.007

6

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.

edited Mar 31 '17 at 10:39

answered Mar 31 '17 at 10:29

Ryan Pergent

4,432
3
36
78

I cannot find that option in the documentation https://react-bootstrap.github.io/components/overlays/? – Andrei Cioara Dec 21 '19 at 04:20
1

@Andrei Cioara, the option is not documented, as explained in the links. But it does exist. – Ryan Pergent Dec 21 '19 at 08:31
I cannot get it to work on the OveralyTrigger. Does it only exit on the Overlay? – Andrei Cioara Dec 21 '19 at 21:49
Were you able to figure out how to do this with OverlayTrigger? @AndreiCioara – Aditya Anand Jun 03 '20 at 06:02
So, anyone was able to make that work with OverlayTrigger? – Lukasz Apr 26 '23 at 09:47

Change react-bootstrap OverlayTrigger Popover's content while displayed

1 Answers1