Close React-Bootstrap Popover with a button that's inside popover

Question

I'm using React-Bootstrap Popover. I would like the popover to close once a user clicks on a close button located inside the popover. I would prefer a solution that doesn't use refs as facebook doesn't recommend using them. Here is my code

const popoverTop = (
  <Popover id="popover-positioned-top" title="Popover top">
    <button type="button" className="close">&times;</button>
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

<OverlayTrigger trigger="click" placement="top" overlay={popoverTop}>
  <Button>Holy guacamole!</Button>
</OverlayTrigger>

Answer 1

Here is what helped me :

<OverlayTrigger
    container={this}
    trigger="click"
    placement="right"
    overlay={this.popoverClick}
    rootClose={true}
>
    <Button aria-label="Get Info" bsSize="medium">
        Button Name
    </Button>
</OverlayTrigger>

where popoverClick is:

<Popover id="popover-positioned-scrolling-right" className="popover-main">
    <div className="popover-custom-header">
        <h3 className="popover-title">Your Title</h3>
        <IconButton aria-label="Close" className="icon-button" 
                    onClick={() => document.body.click()}>
            <Close fontSize="small"/>
        </IconButton>
    </div>
    <div class="popover-custom-content">
        {/* ... the content you need */}
    </div>
</Popover>

document.body.click() -> does all the work.

Ref: https://stackoverflow.com/a/47636953/9743227

I hope it will help you, too!

Answer 2

I know that a lot of time has passed, today I had this same problem and I arrived here. I found a way to fix it.

<OverlayTrigger trigger = 'your-trigger' placement = 'auto' rootClose 
ref = 'overlay'>
  <Popover title='' >
  ------
  </Popover>
    <Button onClick={ this.hidePopover } ></Button>
</OverlayTrigger>

then in the method

hidePopover = ( ) => 
{
   this.refs.overlay.handleHide();
}

I hope I have helped