React-modal: Close On Escape

[machineghost]

Summary:

Just the standard "modal closes when user hits the escape key".

Steps to reproduce:

1. Make a modal
2. Open it
3. Hit Escape

Expected behavior:

The modal closes

Additional notes:

I've been reading through the issues here and this functionality seems to have gone from "always on", to "dependent on the presence of onRequestClose" to non-existent.

It'd be really nice (and I think would make everyone happy) if we could just do:

<ReactModal closeOnEscape={true/false} />

[claydiffrient]

@machineghost It should work as long as you have an onRequestClose. The reason for this is that the modal doesn't track it's own open state. Your application should control that via the isOpen prop.

Pressing ESC triggers the modal to know that it needs to close, but it doesn't know how to do that unless you've given it the onRequestClose prop. The prop will likely change in v2 and make this much more clear.

I'm going to close the issue for now you can follow the discussion about new props with #282.

[machineghost]

While I understand closing my issue, I don't understand how it relates to the one you linked. There is nothing about escape closing in it.

[machineghost]

I mean absolutely no disrespect (as an OSS author myself I completely understand that you owe your users absolutely nothing), but for what it's worth, as an outsider looking in it appears like you're against the functionality of the modal component being controllable via explicit properties. Again, as an outsider looking in, this appears to be very un-React-like.

I'll go back to being the lowly user I am now :-)

[machineghost]

P.S. With:

<ReactModal
    onRequestClose={() => {}}

I do not get close on escape functionality. Unsurprisingly:

<ReactModal
    onRequestClose={() => {}}
    closeOnEscape={true}

doesn't work either ;-)

[claydiffrient]

I'm sorry you feel that way.

Please see the example at
https://reactcommunity.org/react-modal/examples/on_request_close.html
demonstrating proper use.

The reason I closed the issue is because it's something that comes up
frequently, I explained why it works the way it does, and I have a
reference to the other issue because I believe that clearer prop names
might make this a non issue or at least easier to understand.

On Wed, Jan 25, 2017, 1:05 PM Jeremy Walker [e-mail]
wrote:

P.S. With:

onRequestClose={() => {}}

I do not get close on escape functionality.

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/reactjs/react-modal/issues/314#issuecomment-275217834,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAlANiLsbJlwTj4Fyhb3KHYlP9aM2QpPks5rV6sGgaJpZM4Lt66i
.

[shapiromatron]

Hi @claydiffrient, the example you point to is incomplete, right? Don't you need to add a keyboard event listener to the ExampleApp component to trigger the handleCloseModal event?

componentDidMount(){
    document.addEventListener('keyup', (e) => {
        if (e.keyCode === 27) this.handleCloseModal();
    });
}

Update: The example is complete. My implementation was not (which is why I had to add the additional code). My code example above isn't required if you read the docs better than I did. Ok to delete this comment if it adds additional confusion.

[claydiffrient]

Shouldn't need to because keyboard listeners are already in place for the
modal. They just call onRequestClose when ESC is pressed.

On Thu, Aug 3, 2017, 9:06 AM Andy Shapiro [e-mail] wrote:

Hi @claydiffrient https://github.com/claydiffrient, the example you
point to is incomplete, right? Don't you need to add a keyboard event
listener to the ExampleApp component to trigger the handleCloseModal
event?

componentDidMount(){
document.addEventListener('keyup', (e) => {
if (e.keyCode === 27) this.handleCloseModal();
});
}

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/reactjs/react-modal/issues/314#issuecomment-319997328,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAlANtEzoevy2M00Dr--sgbVWx2tI1Qpks5sUeIQgaJpZM4Lt66i
.

[mvolkmann]

It looks like you also have to set the prop shouldCloseOnEsc according to the code at https://github.com/reactjs/react-modal/blob/79688e85bb851b15343b2f2376ad01076a4e08d9/src/components/ModalPortal.js#L204. However, even after setting that prop the modal doesn't close for me when I press ESC. I do have onRequestClose set also and the function that is set to does not get called when the ESC key is pressed.

[mvolkmann]

Ah! I had shouldFocusAfterRender set to false. That breaks it because then it doesn't get the keyDown events. The reason I didn't want it to get focus is that I don't want the browser to put a blue border around it. I wonder if there is a way for it to get focus and not give me the blue border.

[mvolkmann]

Got it! I just needed this in my CSS:

.myModal:focus {
  outline: none;
}