https://smartsignpro.ai/assets/controllers/auto_select_controller-…e3b8333faf8f8436e97af0c141e451dd1ba402d4.js

1import { Controller } from "@hotwired/stimulus"
2
3// Selects the full value of a pre-filled field when it's focused/clicked, so it
4// can be overwritten in one keystroke. Attached once to <body>, it uses event
5// delegation. Applies to number inputs and any field opting in via the
6// `js-autoselect` class or `data-autoselect` attribute.
7const SELECTABLE_TYPES = ["text", "number", "search", "tel", "url", "email", "password"]
8
9export default class extends Controller {
10  connect() {
11    this.onFocus = this.handleFocus.bind(this)
12    this.onMouseUp = this.handleMouseUp.bind(this)
13    this.element.addEventListener("focusin", this.onFocus)
14    this.element.addEventListener("mouseup", this.onMouseUp)
15  }
16
17  disconnect() {
18    this.element.removeEventListener("focusin", this.onFocus)
19    this.element.removeEventListener("mouseup", this.onMouseUp)
20  }
21
22  handleFocus(event) {
23    const el = event.target
24    if (!this.selectable(el)) return
25    this.pendingSelect = true
26    el.select()
27  }
28
29  // Prevent the focusing click's mouseup from collapsing the fresh selection.
30  // Later mouseups (when already focused) are left alone so the user can still
31  // place the caret or select a portion.
32  handleMouseUp(event) {
33    if (!this.selectable(event.target)) return
34    if (this.pendingSelect) {
35      event.preventDefault()
36      this.pendingSelect = false
37    }
38  }
39
40  selectable(el) {
41    if (!el || el.disabled || el.readOnly) return false
42    if (el.value == null || el.value === "") return false
43
44    const optedIn = el.classList.contains("js-autoselect") || el.hasAttribute("data-autoselect")
45    const isNumber = el.tagName === "INPUT" && el.type === "number"
46    if (!optedIn && !isNumber) return false
47
48    return el.tagName === "INPUT" && SELECTABLE_TYPES.includes(el.type)
49  }
50};