Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Bootstrap - How to manually close OverlayTrigger

Tags:

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.

like image 558
Todd Chambery Avatar asked Jul 19 '16 20:07

Todd Chambery


People also ask

How to close a popover in react?

Use Focus Trigger to Dismiss Popover Use the focus trigger instead. 1... 2<OverlayTrigger trigger="focus" placement="right" overlay={popover}> 3... This will close the popover when the user clicks outside of it.

How do you use popover in bootstrap react?

We can use the following approach in ReactJS to use the react-bootstrap Popover Component. Popover Props: arrowProps: It is used to position the popover arrow. content: It is used to create a Popover with a Popover.

What is OverlayTrigger?

OverlayTrigger Component helps with common use-cases into our Overlay components. It positions itself with the help of ref and style prop for our overlay component.

How do I use Bootstrap tooltip in react?

We can use the following approach in ReactJS to use the react-bootstrap Tooltip Component. Tooltip Props: arrowProps: It is used to position the tooltip arrow. id: It is just an HTML id attribute that is necessary for accessibility.


1 Answers

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

like image 77
Noah John Ucab Avatar answered Sep 18 '22 16:09

Noah John Ucab