eminuxCRM/app/javascript/controllers/modal_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["panel"]
  static values = { open: Boolean }

  connect() {
    if (this.openValue) this.show()
    this.boundKey = this.onKey.bind(this)
    document.addEventListener("keydown", this.boundKey)
  }

  disconnect() {
    document.removeEventListener("keydown", this.boundKey)
  }

  show() {
    this.panelTarget.classList.remove("hidden")
    this.panelTarget.querySelector("input, textarea, select")?.focus()
  }

  hide() {
    this.panelTarget.classList.add("hidden")
  }

  onKey(event) {
    if (event.key === "Escape") this.hide()
  }
}