ReactBootstrap popover dismiss on click outside

Question

ReactBootstrap provides a popover control. I would like this to be dismissed on clicking outside the popover in a similar way to how modals work (it just dismisses by default clicking out of the box).

Is there a way to do this using ReactBootstrap or do I need to custom code something?

JSfiddle of a popover: http://jsfiddle.net/226cwe4e/

React.createClass({
    render: function() {
        return <ReactBootstrap.OverlayTrigger trigger="click" placement="bottom" overlay={<ReactBootstrap.Popover title="Popover bottom"><strong>Holy guacamole!</strong> Check this info.</ReactBootstrap.Popover>}>
        <ReactBootstrap.Button bsStyle="default">Holy guacamole!</ReactBootstrap.Button>
      </ReactBootstrap.OverlayTrigger>;
    }
});

Solution 1

I think this should work for you:

const Hello = () => (
  <ReactBootstrap.OverlayTrigger 
    trigger="focus" 
    placement="bottom" 
    overlay={
      <ReactBootstrap.Popover title="Popover bottom">
        <strong>Holy guacamole!</strong> Check this info.   
      </ReactBootstrap.Popover>
    }
  >
    <ReactBootstrap.Button bsStyle="default">Holy guacamole!</ReactBootstrap.Button>
  </ReactBootstrap.OverlayTrigger>
);

ReactDOM.render(<Hello />, document.getElementById('app'));

Here is jsfiddle

Solution 2

No you don't need any custom code. Just include rootClose prop and this will do for you. Its in the react bootstrap official documentation https://react-bootstrap.netlify.com/components/overlays/#overlays-api

<OverlayTrigger trigger='click' rootClose>
  ....
</OverlayTrigger>

Solution 3

For React Bootstrap 4.4 it's necessary to add a onHide function alongside rootClose, also these properties are for Overlay Component (not OverlayTrigger).

Here is an example:

function Example() {
  const [show, setShow] = useState(false);
  const target = useRef(null);

  const handleClick = (event) => {
    setShow(!show);
  };

  return (
    <div ref={ref}>
      <Button onClick={handleClick} ref={target}>Holy guacamole!</Button>

      <Overlay
        show={show}
        target={target.current}
        placement="bottom"
        rootClose
        onHide={() => setShow(false)}
      >
        <Popover id="popover-contained">
          <Popover.Title as="h3">Popover bottom</Popover.Title>
          <Popover.Content>
            <strong>Holy guacamole!</strong> Check this info.
          </Popover.Content>
        </Popover>
      </Overlay>
    </div>
  );
}

render(<Example />);

Solution 4

In addition to @makuno 's answer. In case you wish the popover to be kept open on clicks inside the popover and dismissed on clicks outside you can use the following

<OverlayTrigger trigger='click' rootClose>
    <div onClick={e => {
        e.stopPropagation(); 
        e.preventDefault(); 
        e.nativeEvent.stopImmediatePropagation();
    }}>
        Click me, I won't dismiss the popover
    </div>  
....
</OverlayTrigger>

The key thing to note here would be the e.nativeEvent.stopImmediatePropagation() statement

View more solutions

Comments

[knowbody]

have you tried trigger={["focus", "click"]}

[knowbody]

have a look here

[undefined]

@knowbody that gets really close but click and focus, means it immediately closes when you click it the first time (see jsfiddle.net/862fht00), just focus means it works how I want except clicking on the link again doesn't close it, I think this is the closest to the behaviour I want so I will just go with that.

[undefined]

@knowbody actually focus also means clicking on something in the popover dismisses it, so you cant have a button in there for example

[knowbody]

yeah I've realised that. that as close as I can help. I think the hover over option is the closest to what you want. check their github repo, I think I've seen a opened ticket on this issue

[knowbody]

also just found this jsfiddle.net/spicyj/q6hj7

[undefined]

@knowbody interesting that's done from scratch without ReactBootstrap. Ill see if I can find the issue in the backlog and +1 it :) thanks for your help

[undefined]

For those interested the issue for this in ReactBootstrap is github.com/react-bootstrap/react-bootstrap/issues/233

[Patrick]

"It's inadvisable to use "hover" or "focus" triggers for popovers, because they have poor accessibility from keyboard and on mobile devices." It would be good to highlight what you changed and why it would resolve the question, rather than just pasting code.

[Hanming Zeng]

Thank you!! I was looking so hard for that

[adir abargil]

this docs is misleading, i didnt think the overlay trigger is the same as overlay and inherit props

[Clinton Chau]

This is especially important if you are creating a popover within a React-Bootstrap Modal.