React-modal: Closing the modal when overlay is clicked not working

[emwee]

Hi, I am using the react-modal component but noticed the modal itself does not close when I click outside the modal (i.e. on the overlay)

Some example code:

<Modal
    isOpen={this.state.modalIsOpen}
    overlayClassName='modal-overlay'
    className='modal-overlay-content'
>
    <p>Contents...</p>
</Modal>

SASS code:

.modal-overlay
    +mask()
    +opacity(1)
    color: color(grey1)
    width: 100%
    height: 100%
    background-color: rgba(color(black), 0.24)
    +flexbox()
    +align-items(center)
    +justify-content(center)

.modal-overlay-content
    margin: 0.5rem
    padding: 1rem
    outline: none
    overflow: auto
    background-color: color(white)
    +box-shadow(0 10px 20px 0 rgba(0, 0, 0, 0.24), 0 16px 40px 0 rgba(0, 0, 0, 0.32))
    +border-radius()

I am using version 1.4.0.

[diasbruno]

@emwee You can try to add onRequestClose={() => {}} to the modal.

Reference: https://github.com/reactjs/react-modal/blob/master/lib/components/ModalPortal.js#L131

[emwee]

Hi Bruno, I tried that, but it makes no difference unfortunately.

[diasbruno]

If you are handling the state of the modal on your component, maybe you need to update that callback (onRequestClose) to something like...

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

[emwee]

Ah, of course! That makes sense _and_ works! Thank you!