Search code examples
reactjseventsbootstrap-modalreact-bootstrap

How to stop event from bubbling when exiting react-bootstrap modal?

Say I want to stop the event from propagating upon exit from the modal, for example when clicking on the background or the exit button which will close the modal. But then it'll redirect me to the (parent)? onClick event upon exiting.

<Modal onHide={(e) => {
e.stopPropagation();
setShow(false);
...
}}>

<Modal/>

The above does not work. I also tried onExit which also doesn't work.

Solution

  • The workaround was to use a div element around the Modal to control the event.

    <div 
onClick ={(e) => e.stopPropagation()}
>
<Modal>
<Modal/>
</div>