React-modal: shouldCloseOnOverlayClick attribute doesn't work.

[Diarsid]

Hi!

I have tried to use your modal window implementation, but encountered that

shouldCloseOnOverlayClick={false}

attribute actually does not work at all.

I've tried it several times, with values 'false' and with 'true' and in different browsers. In each case the modal dialog could be closed by clicking on the overlay area.
It seems that this attribute doesn't affect the Modal component behavior at all.

Please, fix it. Thanks.

[claydiffrient]

@Diarsid Sorry for the trouble you are having. That prop is currently on our master branch, but we haven't cut a new release to npm yet. That will be happening shortly and then that prop will work to accomplish what you want.

[Diarsid]

Thanks one more time!

[claydiffrient]

Version 1.0.0 has this and is now released.

[kolyasya]

Have the same issue now

react: 15.3.2
react-modal: 1.6.1

When I click on overlay, nothing happens

[pretentiousgit]

Same issue here. Neither escape key nor overlay click closures work.
react: 15.3.2
react-modal: 1.6.1

[tsriram]

Okay, I did encounter this issue as well and turns out you MUST provide onRequestClose prop (a function that actually closes the modal) for shouldCloseOnOverlayClick to work. This info is given next to Testing in README and I guess others who've reported this issue (after v1.0.0) didn't notice it.

[leaspark]

Seems like this problem has returned. Providing onRequestClose prop as well as setting shouldCloseOnOverlayClick to false. Clicking the overlay will not close the modal.

[whitecrownclown]

Tested this with

react-modal v2.2.2

Code sample

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            modalIsOpen: true
        };
    }

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

  render() {
    return (
      <div className="App">
          <Modal isOpen={this.state.modalIsOpen} onRequestClose={this.closeModal}>
            This is my modal
          </Modal>
      </div>
    );
  }
}

And it works just fine.

[donpinkus]

Tested this with react-modal v2.2.2.

shouldCloseOnOverlayClick is broken.

Code sample below:

<ReactModal
  isOpen={this.state.showModal}
  contentLabel="Foo"
  shouldCloseOnOverlayClick={true}>
  Hello
</ReactModal>

[whitecrownclown]

@donpinkus It does not work because it requires the onRequestClose prop to call. A prop which i added in my example.Not sure if it's mentioned somewhere, but shouldCloseOnOverlayClick depends on it.

[diasbruno]

@whitecrownclown That is correct. shouldCloseOnOverlayClick depends on onRequestClose because react-modal does not store the isOpen on its internal state.

[diasbruno]

@donpinkus @whitecrownclown If this detail is missing on the doc, can you please submit a PR?

[diasbruno]

Here is the link for our gitbook.

Using shouldCloseOnOverlayClick

[michaelrodov]

@whitecrownclown That is correct. shouldCloseOnOverlayClick depends on onRequestClose because react-modal does not store the isOpen on its internal state.

I have a few comments regarding this behavior:

1. If i need to handle the closing myself, then why theres a conditional prop shouldCloseOnOverlayClick, it implies that its being handled by the modal itself, if its redundant it need to be removed.
2. I didn't find any documentation regarding this behavior (had to debug it and to then read this post)
3. I think it does make sense to give default behavior to the closing, if shouldCloseOnOverlayClick === true then do beforeClosing(); closeModal(); afterClosing()

just my 2 cents

[omichowdhury]

I just fixed this problem in a case where it wasn't working, even though I was supplying onRequestClose.

The problem was that I had some CSS that centered the content inside ReactModal. That CSS set the .ReactModal class to 100% width and height, which meant that the handleContentOnClick handler was being called, not handleOverlayOnClick.

Moving the CSS to the .ReactModal__Overlay class fixed the issue.