react-responsive-modal : how to prevent closing of modal when we click outside the div

Question

I am using react-responsive-modal for implementing my modal. One issue i am facing is that my modal gets closed when i click anywhere on the screen, outside my modal div. I want my modal to be closed only when i click the cancel or close button. I found onOverlayClick function props and i used it to apply preventDefault but it was of no use.

can anyone please suggest a way to implement this feature. thanks in advance.

class CustomModal extends Component{
constructor(props) {
    super(props);
}

onOverlay = (e) =>{
  e.preventDefault();
}

render(){
    const { props } = this;

    return(
        <Modal open={props.open} onClose={props.onCloseModal} 
         onOverlayClick={e =>this.onOverlay(e)} center>
        <div className="on-setting-modal">
          <h6>"are you sure ?"</h6>
          <div className="on-setting-modal-buttons">
            {
                !!props.showCancel &&
                <button onClick={props.onCloseModal} >Cancel</button>
            }
            <button onClick={props.onOkModal} >OK</button>
          </div>
        </div>
      </Modal>
  )
 }
}

export default CustomModal

Answer 1

Your problem can be solved by using the property called closeOnOverlayClick={false} this makes the modal to be not closed when we click on the overlay

Answer 2

You can add closeOnOverlayClick={false} in your Modal component

Answer 3

Just set onOverlayClick to false, it will resolve the problem