react-modal not closing when clicking the overlay

Question

I'm using react-modal

The documentation mentions that the modal should close when you click the overlay by default. Even if I set the shouldCloseOnOverlayClick prop to true, this still does not work.

I'm not aware of anything that might prevent that event from occurring.

In case this is relevant/indicative of anything (and I haven't figured out why this is showing), I noticed in Chrome Developer Tools that my modal's overlay and content nodes both have an undefined class. All the CSS classes I have used are defined and working as they should.

Here's the relevant JSX and CSS, please let me know if more context is required.

JSX:

return (
    <div className="Modal">
        <Modal
            className={{
                base: 'Modal-content' + ' Modal-InputError-videoURL'
            }}
            overlayClassName={{
                base: 'Modal-overlay'
            }}
            isOpen={true}
            contentLabel="Modal"
        >
            {props.message}
            <br />
            <br />
            <br />
            <button
                className="Modal-button"
                onClick={events.handleCloseModal}
            >
                Close
            </button>
        </Modal>
    </div>
)

CSS classes:

.Modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9998;
}

.Modal-content {
    display: relative;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid #ccc;
    background: rgb(38,38,38);
    border: 1.5px solid rgb(45,45,45);
    overflow: auto;
    border-radius: 1px;
    outline: none;
    z-index: 9999;
    width: 400px;
    margin-left: -150px;
    margin-right: -150px;
    padding: 24px;
    line-height: 16px;
}

.Modal-InputError-videoURL {
    height: 134px;
    margin-bottom: -67px;
    margin-top: -67px;
}

.Modal-button {
    display: inline-block;
    padding: 4px;
    margin: 0;
}

Solution 1

isOpen property is statically set to true. You should control its value by keeping isOpen value in your state.

isOpen = {this.state.isModelOpen}

And in handleCloseModal method you can set its value to false.

this.setState({isModelOpen: false})

Solution 2

I solved this problem by using onRequestClose (per the docs). It seems that react-modal doesn't store isOpen in its local state, so I provided a callback to onRequestClose that updates the state in the parent component, which is subsequently passed down to the modal as a prop.

http://reactcommunity.org/react-modal/examples/on_request_close.html