react-modal shouldCloseOnOverlayClick not working

Question

I'm using react modal, and the modal will not close upon clicking the overlay. I provide props to both isOpen and onRequestClose, but the modal remains open.

closeModal= () => {
  this.setState({ modalIsOpen: false });
};

   <Modal 
    isOpen={this.state.modalIsOpen} 
    onRequestClose={this.closeModal} 
    shouldCloseOnOverlayClick={true} 
   >
     <div>This is my Modal</div>
     <Button onClick={this.closeModal}>Close Modal<Button>
</Modal>

I know this has been an issue in the past. Is there anything else I can try? Thank you in advance.

Answer 1

From docs you can see this:

By default the modal is closed when clicking outside of it (the overlay area). If you want to prevent this behavior you can pass the 'shouldCloseOnOverlayClick' prop with 'false' value.

Your code looks fine, maybe the issue is with the version you're using, might have an issue with shouldCloseOnOverlayClick prop. Try without adding the prop, and also check your react-modal version.

Answer 2

If you have easy mode for using modal with react, for me is the best away is insert from template index.html in my case it is file in public folder CDN links for bootstrap and jQuery and than make folder for Modal there make two file: index.js and modal.js.

In first is code `import React from 'react'; import MOdal from'./pomocna_modal';

class Modal_gl extends React.Component{

 promena(){
   alert('alert');
 }

render(){

    const user={
        id: 0,
        name:"Naslov modala prvog",
        title: "Telo modala jedan",
        };

    return(
        <div>
            <button type="button" className="btn btn-primary btn-lg"
                    data-toggle="modal" data-target="#myModal" onClick={this.promena}
             ref="prvoDugme">
                Launch demo modal
            </button>
            <button type="button" className="btn btn-primary btn-lg"
                    data-toggle="modal" data-target="#myModal"
                    ref="drugoDugme">
                Drugi poziv istog modala sa promenjenim podacima
            </button>
            <MOdal titlem={this.props.title}  modalb={this.props.name} user={user}  />

        </div>
    );
}

}

export default Modal_gl;

In second code is

/**

* Created by trika on 19-Jan-18. */ import React from 'react';

class Modal extends React.Component{

render() {
    console.log(this.props);
    return (

        <div className="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel">
            <div className="modal-dialog" role="document">
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <h4 className="modal-title" id="myModalLabel">{this.props.user.name}</h4>
                    </div>
                    <div className="modal-body">
                        {this.props.user.title}
                    </div>
                    <div className="modal-footer">
                        <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" className="btn btn-primary">Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    );
}

}; export default Modal;

for calling modal You must use bootstrap code between html tags from where you wish calling Modal like this data-toggle="modal" data-target="#myModal"

Answer 3

This issue is fixed in versiion 2.2.2.