fixin.me/app/javascript/controllers/form_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  processKey(event) {
    switch (event.key) {
      case "Escape":
        this.element.querySelector("a[name=cancel]").click()
        break
      case "Enter":
        this.element.querySelector("button[name=button]").click()
        event.preventDefault()
        break
    }
  }

  validate(event) {
    const id = event.submitter?.getAttribute("data-validate")
    if (!id) return
    const input = document.getElementById(id)
    if (!input.checkValidity()) {
      input.reportValidity()
      event.preventDefault()
    }
  }

  cancel(event) {
    event.preventDefault()
    const el = this.element

    // Move focus to next open form if this one had focus
    const focused = document.activeElement
    if (!focused || focused === document.body || el.contains(focused)) {
      const next = el.parentElement?.querySelector(`#${el.id} ~ tr:has([autofocus])`)
        ?? el.parentElement?.querySelector("tr:has([autofocus])")
      next?.querySelector("[autofocus]")?.focus()
    }

    // Remove associated inner form element (tabular: <tr> wraps a separate <form>)
    document.getElementById(el.dataset.form)?.remove()

    // Re-enable trigger link
    const enableId = el.dataset.link ?? el.dataset.cancelEnable
    if (enableId) Turbo.StreamElement.prototype.enableElement(document.getElementById(enableId))

    // Show hidden row (tabular forms) or no-items placeholder (create form)
    document.getElementById(el.dataset.hiddenRow)?.removeAttribute("style")
    document.getElementById(el.dataset.cancelShow)?.style.removeProperty("display")

    el.remove()
  }
}