CODEWITHSUNDEEP
twitter-bootstrapreactjsreact-bootstrap
undefined
undefined

Reputation: 34248

ReactBootstrap popover dismiss on click outside

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

Upvotes: 19

Views: 22401

Answers (5)

Sanan Ali
Sanan Ali

Reputation: 3427

None of the above worked for me. This worked for me. I had to pass rootCloseEvent="mousedown" along with rootClose={true}

<OverlayTrigger
          rootClose={true}
          rootCloseEvent="mousedown"
          trigger="click"
          placement="left"
          overlay={
            <div className="delete--team cursor-pointer">
              some text
            </div>
          }
        >

Upvotes: 1

Nahush Farkande
Nahush Farkande

Reputation: 5646

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

Upvotes: 2

Guille Acosta
Guille Acosta

Reputation: 2222

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

Upvotes: 4

makunomark
makunomark

Reputation: 809

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>

Upvotes: 65

knowbody
knowbody

Reputation: 8276

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

Upvotes: 2

Related Questions