Interaction with other uses of Esc

[joshkel]

I'm using react-modal2 as part of a more complex app that does its own keyboard handling, and I noticed that it doesn't do anything to keep its Esc event from also being seen by other parts of the site. (In my example, I have an Esc handler on my app container, and pressing Esc to close the modal also fires the app's event.)

Possible solutions:

1. Pass useCapture true to document.addEventListener and document.removeEventListener so that react-modal2's global Esc handler fires before any individual React components'.
2. Move the keyboard handler to the ref="modal" component; since it captures the focus, it should see any Esc keypresses.

And whether 1 or 2 is chosen, update handleDocumentKeydown to call event.stopImmediatePropagation().

I'm not an expert on DOM events, so I don't know which is better. (2 seems cleaner, but I assume there was some reason for going with document-level events in the current implementation.)

[joshkel]

I put together a demo of this issue at https://github.com/joshkel/react-modal2-esc-demo. If you click the button to show the modal then press Esc to close it, it shows the parent container's "You pressed Escape" message.

[srph]

For now, all I've done is check state.

<Dropdown onOpen={() => this.setState({ dropdown: true })} />
<ReactModal2 closeOnEsc={!this.state.dropdown} />