React Bootstrap - How to manually close OverlayTrigger

Question

I have an OverlayTrigger package that contains some form inserts, and a Button for saving data and closing.

 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 is executed onExit , but I see no way to manually close the overlay. I am trying to use the show attribute from Bootstrap Modal , which (as expected) does not work.

Answer 1

Add a link to the <OverlayTrigger ref="overlay"... element and call the hide method after rendering the element. Not tested, but should work:

 this.refs.overlay.hide(); 

Answer 2

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