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.

score 1 · Answer 1 · answered Jul 25 '17 at 19:53

1

This issue is fixed in versiion 2.2.2.

answered Jul 25 '17 at 19:53

l-spark

871
2
10
25

score 1 · Answer 2 · answered Jan 19 '18 at 23:15

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"

score 0 · Answer 3 · answered Jul 25 '17 at 17:12

0

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.

answered Jul 25 '17 at 17:12

Daniel Andrei

2,654
15
16

The problem persists without adding the prop. Using react-modal 2.0.6 – l-spark Jul 25 '17 at 17:18
Could you provide more context to your code? I've no doubt the issue might be with the module itself, but this will help debug it. – Daniel Andrei Jul 25 '17 at 17:21
Adrei Upon clicking a button, the modal is opened. Then upon clicking another button inside the modal, I call it to close. This functionality works, but I can't close the modal by simply clicking on the overlay. I added more of my code above. – l-spark Jul 25 '17 at 17:33
1

Just tested this with your code snippet using **react-modal** v2.2.2 and it worked.I recommend you update and try again. – Daniel Andrei Jul 25 '17 at 19:23

react-modal shouldCloseOnOverlayClick not working

3 Answers3

Linked