React-modal: disable esc key close the modal

[craigcosmo]

esc key press will close modal. Anyway to prevent this? can there be an option?

[claydiffrient]

@craigcosmo What's your use case for this? From an accessibility standpoint, pressing the escape key is a fundamental expected behavior for keyboard only users (http://webaim.org/resources/evalquickref/#keyboard)

[craigcosmo]

We dont want users mistakenly press esc close the form when filling it out. That would a terrible experinece. 

Craig

On Mon, Jun 13, 2016 at 2:17 AM +0700, "Clay Diffrient" [email protected] wrote:

@craigcosmo What's your use case for this? From an accessibility standpoint, pressing the escape key is a fundamental expected behavior for keyboard only users (http://webaim.org/resources/evalquickref/#keyboard)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[deviantony]

You can prevent the modal from closing with the Esc key using something like that:

class CantCloseMyModal extends React.Component {

constructor() {
  this.state = {
    open: true,
    canClose: false,
  };
}

//don't forget to bind this method
close() {
    if (this.state.canClose) {
      this.setState({ open: false });
    }
  }

render() {
    return (
      <Modal
        isOpen={this.state.open}
        onRequestClose={this.close}
        shouldCloseOnOverlayClick={false}
      >
      ...
     </Modal>
  );
}

You just need to set the variable canClose to true when you want to give the user the ability to close the modal.

[neekibo]

I also vote for an option. My use case is a color-picker (react-color) inside a modal (react-modal). On first escape I want to close the color-picker, not the modal. I am using react-keydown already, so all shortcuts would be handled consistently by react-keydown.

[claydiffrient]

@neekibo @craigcosmo After reviewing this carefully, I don't want to build this behavior into the modal itself. It's another thing to maintain that in many (if not most) modal uses lowers the accessibility of the component.

I understand your concern for the use cases you have outlined, and I have not taken them lightly. I would suggest you do something similar to what @deviantony suggested to prevent this in your use cases.

[craigcosmo]

I found out you can actually have this feature by omiting the onRequestClose property

by that, you call the component like this

<Modal
    overlayClassName="login-error-modal-overlay"
    className="login-error-modal"
    isOpen={this.state.modal}
    >
    <span class="login-error">you have login error</span>
</Modal>

you can close the modal by setState isOpen = false whenever you want it to close

[gevgeny]

@craigcosmo If you omit onRequestClose so click-out-of-modal event won't work neither. Here is my solution:

<ReactModal
  onRequestClose={(event) => {
    // Ignore react-modal esc-close handling 
    if (event.type === 'keydown' && event.keyCode === 27) return

    onRequestCloseHandler()
  }}
>

[craigcosmo]

@gevgeny yeah I noticed that 👍

[kuantayevs]

You can use disableEscapeKeyDown = {true}

[brunofin]

<ReactModal shouldCloseOnEsc={false} {...props}></ReactModal>