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.

Answer 1

I solved this problem with the following code:

import React from "react";
import ReactDOM from "react-dom";
import {
  Container,
  Popover,
  OverlayTrigger,
  Button,
  Row,
  Col
} from "react-bootstrap";

// Styles
import "bootstrap/dist/css/bootstrap.css";

const PopoverCustom = () => {
  let ref = React.useRef(null);

  const popover = (
    <Popover id="popover-basic">
      {/* <Popover.Title as="h3">Popover right</Popover.Title> */}
      <Popover.Content>
        And here's some <strong>amazing</strong> content. It's very engaging.
        right?
        <div className="mt-3 mb-1">
          <Button
            onClick={() => ref.handleHide()}
            size="sm"
            variant="outline-dark"
            className="pt-0 pb-0"
          >
            Hide Popover
          </Button>
        </div>
      </Popover.Content>
    </Popover>
  );

  return (
    <OverlayTrigger
      ref={r => (ref = r)}
      container={ref.current}
      trigger="click"
      placement="auto"
      overlay={popover}
      rootClose
    >
      <Button variant="dark">Show popover</Button>
    </OverlayTrigger>
  );
};

function App() {
  return (
    <Container className="ml-5 mt-5">
      <Row>
        <Col className="offset-sm-2" sm={8}>
          <PopoverCustom />
        </Col>
      </Row>
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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>

Answer 4

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();