https://blendswap.com/assets/controllers/unsubscribe_form_controller-542ea8b2.js

1import { Controller } from "@hotwired/stimulus"
2
3// iOS Safari does not render the native "please select one of these options"
4// bubble for a required radio group — it just refuses to submit, so tapping
5// Unsubscribe looks like a dead button. Show our own inline message instead.
6//
7//   <form data-controller="unsubscribe-form">
8//     <input type="radio" name="reason" required data-action="change->unsubscribe-form#clear">
9//     <p data-unsubscribe-form-target="error" class="hidden">Pick a reason</p>
10export default class extends Controller {
11  static targets = ["error"]
12
13  connect() {
14    // `invalid` doesn't bubble, so listen on the form in the capture phase.
15    this.onInvalid = this.onInvalid.bind(this)
16    this.element.addEventListener("invalid", this.onInvalid, true)
17  }
18
19  disconnect() {
20    this.element.removeEventListener("invalid", this.onInvalid, true)
21  }
22
23  onInvalid(event) {
24    event.preventDefault() // suppress the native bubble; ours is the reliable one
25    this.errorTarget.classList.remove("hidden")
26    this.errorTarget.scrollIntoView({ block: "nearest", behavior: "smooth" })
27  }
28
29  clear() {
30    this.errorTarget.classList.add("hidden")
31  }
32}