Files
fixin.me/app/javascript/controllers/form_controller.js
barbie-bot eb8fe7622a Fix autofocus on dynamically inserted forms, remove this.blur() handlers
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>
2026-04-04 14:16:34 +00:00

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()
}
}
}