Call setState with Click or Escape Key

Question

I have a React Modal that opens and closes via a handler function.

I'd like to call that function with either a click event or with the use of the esc key for accessibility proposes.

How could I track both events at the same time?

So far I got the esc event as:

 handleCloseModal = event => {
    if (event.keyCode === 27) {
      this.setState({ modal: false })
    }
  }

But then I lose the click functionality on

<Modal 
  onClick={handleCloseModal} 
  role="button" tabIndex={0} 
  onKeyDown={handleCloseModal}
 />

How should I go about this?

Answer 1

One possible solution can be: Create a separate function to close the Modal. Use that function for onClick and call it when esc key pressed.

Like this:

<Modal 
  onClick={handleCloseModal} 
  role="button" tabIndex={0} 
  onKeyDown={handleKeyDown}
/>

handleKeyDown = event => {
  if (event.keyCode === 27) {
    handleCloseModal()
  }
}

handleCloseModal = () => this.setState({ modal: false })

Answer 2

If I understand correctly, you're wanting to reuse the same close event handler for both click and keydown event types. One way to distinguish between these two event types would be to detect the event object's type via instanceof as follows:

handleCloseModal = event => {

    // if event is mouse event, handle it accordingly
    if(event instanceof MouseEvent) {

       // if mouse click detected hide the modal
       this.setState({ modal: false })
    }
    // if event is keyboard event, handle it accordingly
    else if(event instanceof KeyboardEvent) {

        // if escape key pressed for keyboard event then hide the modal
        if (event.keyCode === 27) {
          this.setState({ modal: false })
        }
    }
}