https://hackorum.dev/assets/controllers/search_focus_controller-75cd587d.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = ["input", "section"]
5
6  connect() {
7    this._onHashChange = this.focusIfHash.bind(this)
8    this._onTurboLoad = this.focusIfHash.bind(this)
9    this._onLinkClick = this.handleLinkClick.bind(this)
10    window.addEventListener("hashchange", this._onHashChange)
11    document.addEventListener("turbo:load", this._onTurboLoad)
12    document.addEventListener("click", this._onLinkClick)
13    this.focusIfHash()
14  }
15
16  disconnect() {
17    window.removeEventListener("hashchange", this._onHashChange)
18    document.removeEventListener("turbo:load", this._onTurboLoad)
19    document.removeEventListener("click", this._onLinkClick)
20  }
21
22  focusIfHash() {
23    const isSearch = window.location.hash === "#search"
24    if (this.hasSectionTarget) {
25      this.sectionTarget.classList.toggle("is-search-focus", isSearch)
26    }
27    if (isSearch && this.hasInputTarget) {
28      this.inputTarget.focus()
29    }
30  }
31
32  handleLinkClick(event) {
33    if (event.defaultPrevented) return
34    const link = event.target.closest('a[href="#search"]')
35    if (!link) return
36    window.location.hash = "search"
37    setTimeout(() => this.focusIfHash(), 0)
38  }
39}