forked from fixin.me/fixin.me
form_controller.connect() now blurs the previously focused element and explicitly focuses the [autofocus] element when a form is inserted into the DOM (via Turbo Stream). Only runs when an [autofocus] element is present, so closing forms and other stream updates are unaffected. Remove all onclick='this.blur()' inline handlers from templates — they were a workaround for the same autofocus problem, now solved properly via the Stimulus lifecycle. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
34 lines
805 B
JavaScript
34 lines
805 B
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
export default class extends Controller {
|
|
connect() {
|
|
const autofocusEl = this.element.querySelector('[autofocus]')
|
|
if (autofocusEl) {
|
|
document.activeElement?.blur()
|
|
autofocusEl.focus()
|
|
}
|
|
}
|
|
|
|
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()
|
|
}
|
|
}
|
|
}
|