https://www.wissel.nl/assets/concerns/intake/controllers/offer_controller-bfcaae4e.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static values = {
5    userHasSelectedOffer: Boolean,
6  }
7  static targets = ["customerDetails"]
8
9  connect() {
10    if (this.userHasSelectedOfferValue) {
11      if (!this.hasCustomerDetailsTarget) return
12
13      // Only scroll the 1st time a user clicks on an offer.
14      const frame = this.element.closest("turbo-frame")
15      if (frame?.hasAttribute("data-offer-scrolled")) return
16      frame?.setAttribute("data-offer-scrolled", "")
17
18      this.#scrollToCustomerDetailsAndFocus()
19    }
20  }
21
22  /******************************\
23   * Stimulus lifecycle callbacks
24  \******************************/
25
26  /********************\
27   * User interactions
28  \********************/
29
30  /***********\
31   * Functions
32  \***********/
33
34  #scrollToCustomerDetailsAndFocus() {
35    const firstInput = this.customerDetailsTarget.querySelector("input")
36    if (!firstInput) return
37
38    firstInput.scrollIntoView({ behavior: "smooth", block: "center" })
39    setTimeout(() => firstInput.focus(), 300)
40  }
41}