React-modal: Readme example shouldCloseOnOverlayClick does not work

[ajthinking]

Steps to reproduce:

1. Go to https://codepen.io/claydiffrient/pen/woLzwo
2. Press Trigger modal
3. Press outside the box, on the overlay - it does not close the modal!

[codeniko]

You need to define onRequestClose since it appears shouldCloseOnOverlayClick and shouldCloseOnEsc depend on it. Check out https://github.com/reactjs/react-modal/issues/462

[ajthinking]

Thanks, though onRequestClose is already defined in the example and I cant find any other solution in #462

[soorajvnair]

hey @ajthinking in your codepen, shouldCloseOnOverlayClick is set to false. If you want to close when clicking on the overlay, that needs to be set to true.

[LuminescentMoon]

I have a similar issue. I've verified that Modal has shouldCloseOnOverlayClick: true via devtools. I've verified that the function passed as onRequestClose fires on both pressing Esc and clicking the overlay using a console.log statement. I've verified that this in the onRequestClose handler is pointing to at least a component with the correct name using console.log.

But somehow, closing the modal using Esc works, but closing the modal by clicking on the overlay doesn't. In the latter scenario, the this.setState line in the onRequestClose handler is somehow being ignored, but not in the former scenario as I've inspected the component with devtools and saw that isOpen has not changed to false.

[LuminescentMoon]

Interesting... Pressing Esc to close the modal also does not work if I click the overlay first before pressing Esc.

[drake-smith]

@LuminescentMoon In case anybody comes across this behavior when implementing, here is what I did to resolve.

I was passing my closeModal() method as a reference like onRequestClose={this.closeModal}, which was not working. Instead doing onRequestClose={(e) => { e.stopPropagation(); this.closeModal() }} resolved this issue.

I am using react-modal ^3.11.2

[diasbruno]

@drake-smith Did you get any error messages related to the method, or, is there something else that you need the stopPropagation?