React-modal: shouldCloseOnOverlayClick and shouldCloseOnEsc don't work, even in React Modal's examples

[nth-chile]

Summary:

Steps to reproduce:

1. Go here and click on the codepen link https://reactcommunity.org/react-modal/examples/minimal/
2. Add shouldCloseOnOverlayClick and shouldCloseOnEsc props to the modal
3. Try to close the modal on overlay click or by pressing escape

Expected behavior:

shouldCloseOnOverlayClick should close on overlay click and shouldCloseOnEsc should close on esc!

Link to example of issue:

https://reactcommunity.org/react-modal/examples/minimal/

Additional notes:

[diasbruno]

Hi @nth-chile, yeah...the examples is very old. It's using [email protected], but it's weird that it's not working 🤔.

[nth-chile]

Yeah I first noticed because I wanted to use these two flags in my app today, so it seems like an issue with current version

[diasbruno]

Have you used react-modal on the latest version?

[nth-chile]

It is ^3.12.1

[diasbruno]

Thanks. Can you make a reproducible example?

[nth-chile]

Let me know if this demonstrates the issue: https://codesandbox.io/s/dreamy-cannon-9r360?file=/src/App.js

[diasbruno]

react-modal used a callback function onRequestClose that is called in this cases.

Try to add to your code and let me know if it solves your problem.

[diasbruno]

onRequestClose is used to control the state of isOpen flag.

[diasbruno]

Here is one way to do it. https://codesandbox.io/s/priceless-bouman-f9hq9

[diasbruno]

...but we definitely need to update the docs. I'll flag this as documentation.

[nth-chile]

Ah ok, so the two flags I mentioned just fire onRequestClose

Edit: and they default to true, so there is no need to include them. I just needed to define onRequestClose. Maybe the docs say that & I missed it. Thanks for the help

[diasbruno]

Awesome, @nth-chile.