https://pika.page/assets/controllers/auto_expanding_input_controll…4b94d9a1e768ad97a001f7ed440e4ac8dd54c80c.js

1import { Controller } from "@hotwired/stimulus"
2
3const canvas = document.createElement("canvas")
4const context = canvas.getContext("2d")
5
6export default class extends Controller {
7  connect() {
8    this.resize()
9  }
10
11  resize() {
12    const styles = getComputedStyle(this.element)
13    context.font = `${styles.fontStyle} ${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`
14
15    const text = this.element.value || this.element.placeholder || ""
16    const chrome =
17      parseFloat(styles.paddingLeft) +
18      parseFloat(styles.paddingRight) +
19      parseFloat(styles.borderLeftWidth) +
20      parseFloat(styles.borderRightWidth)
21    const minWidth = parseFloat(styles.minWidth) || 0
22
23    this.element.style.width = `${Math.max(context.measureText(text).width + chrome, minWidth)}px`
24  }
25};