1

I am trying to readjust the positioning of an Overlay, containing a Popover, who's content changes dynamically. As it currently stands, the Popover content updates, but the position of the Popover doesn't change. This results in the updated Popover being in the wrong position (kinda floating there).

First state with content displaying correctly.

After content of Popover updates.

Here's my code:

<Form.Group>
  <Form.Label>Listing URL</Form.Label>
  <Form.Control name="url" ref={this.urlInput} value={this.state.current_listing.listing.url} onChange={this.handleURL} placeholder="Enter URL"/>
  <Overlay target={this.urlInput.current} show={this.state.similar_listings.length > 0} placement="right">
    <Popover style={{width: "700px", maxWidth: "700px"}} key={seedrandom(this.state.current_listing.url)}>
      <Popover.Title as="h3">Similar Listings</Popover.Title>
      <Popover.Content>
        <ListingAccordion listings={this.state.similar_listings} callback={this.callback} mode="similar"/>
      </Popover.Content>
    </Popover>
  </Overlay>
</Form.Group>

I've tried adding the shouldUpdatePosition prop to the Overlay as mentioned in previous questions, but it didn't fix anything. I also tried with the OverlayTrigger component, but that also had the same issue.

mwsmws22
  • 127
  • 2
  • 11

1 Answers1

0

I ended up solving my own question. Hopefully this helps someone. I fixed the positioning issue by forcing React to re-render the Overlay component.

This answer gets all the credit.

All I did was add the random value key to the Overlay, and update the key whenever the contents change.

Overlay:

<Overlay key={this.state.overlayKey} ... > ... </Overlay>

In the function where the contents of the Overlay are being changed:

this.setState({ key: Math.random() });
mwsmws22
  • 127
  • 2
  • 11