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 right */}
      
        And here's some amazing content. It's very engaging.
        right?
        

           ref.handleHide()}
            size="sm"
            variant="outline-dark"
            className="pt-0 pb-0"
          >
            Hide Popover
          
        
      
    
  );

  return (
     (ref = r)}
      container={ref.current}
      trigger="click"
      placement="auto"
      overlay={popover}
      rootClose
    >
      Show popover
    
  );
};

function App() {
  return (
    
      
        
          
        
      
    
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);