React Bootstrap - How to manually close OverlayTrigger

Question

I have an OverlayTrigger wrapping a Popover that contains some form inputs and a Button to save the data and close.

save(e) {
  this.setState({ editing: false })
  this.props.handleUpdate(e);
}

render() {
    return (
      <OverlayTrigger trigger="click"
        rootClose={true}
        onExit={this.save.bind(this) }
        show={this.state.editing}
        overlay={
            <Popover title="Time Entry">
              <FormGroup>
                    <ControlLabel>Data: </ControlLabel>
                    <FormControl type={'number'}/>
              </FormGroup>
              <Button onClick={this.save.bind(this) }>Save</Button>
           </Popover>
        }>

I have rootClose = true, and my callback gets executed onExit, but I don't see a way to manually close overlay. I'm trying to use the show attribute from the Bootstrap Modal that (predictably) doesn't work.

Answer 1

Add a ref to the <OverlayTrigger ref="overlay"... element and call the hide method once the element has been rendered. Haven't tested it but should work:

this.refs.overlay.hide();

Answer 2

Hide function is not a public function on OverlayTrigger. Set <OverlayTrigger rootClose={true}... and then on your onClick event trigger call document.body.click().

Answer 3

If someone is searching for a solution without "close" button but rather -> close it on second click here it is:

    <OverlayTrigger trigger="focus" placement="top" overlay={popover}>
        <a tabindex="0">Some text</a>
    </OverlayTrigger>