Register a Stimulus Controller to listen to any escape key presses.

use-escape-pressed.js

// Usage:
//
// import { Controller } from 'stimulus'
// import { useEscapePressed } from './mixins/use-escape-pressed.js
//
// export default class extends Controller {
//   connect () {
//     useEscapePressed(this)
//   }
//
//   escapePressed () {
//     // close modal/dialog, etc
//   }
// }
//
export const useEscapePressed = (composableController) => {
  const controller = composableController
  const KEYCODE_ESCAPE = 27

  const keydownHandler = (event) => {
    if (event.key === 'Escape' || event.keyCode === KEYCODE_ESCAPE) {
      controller.escapePressed(event)
    }
  }

  const controllerDisconnect = controller.disconnect.bind(controller)

  const observe = () => {
    document.addEventListener('keydown', keydownHandler, false)
  }
  const unobserve = () => {
    document.removeEventListener('keydown', keydownHandler, false)
  }

  Object.assign(controller, {
    disconnect() {
      unobserve()
      controllerDisconnect()
    }
  })

  observe()

  return [observe, unobserve]
}