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: wraps a separate
) 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() } }