openfoodnetwork/app/webpacker/controllers/floating_label_controller.js

import { Controller } from "stimulus";

export default class extends Controller {
  connect() {
    const input = this.element.querySelector("input");
    input.addEventListener("focus", this.focus.bind(this));
    input.addEventListener("blur", this.blur.bind(this));
    if (input.value.length > 0) {
      this.focus();
    }

    const label = this.element.querySelector("label");
    // Add transition class to the label and display the label
    // after a short delay to avoid flickering
    setTimeout(() => {
      label.classList.add("with-transition");
      label.style.display = "block";
    }, 100);
  }

  focus() {
    this.element.classList.add("active");
  }

  blur(e) {
    if (e.target.value.length === 0) {
      this.element.classList.remove("active");
    }
  }
}