https://controltab.io/assets/controllers/dropdown_controller-8b5fe…298b73d834710262f7e50a0a76b628624ad8944e.js

1import { Controller } from "@hotwired/stimulus"
2
3// Manages the behavior of a dropdown menu.
4export default class extends Controller {
5  static targets = ["menu"]
6
7  connect() {
8    // Add a global click listener to close the dropdown when clicking outside.
9    this.boundCloseOnClickOutside = this.closeOnClickOutside.bind(this)
10    document.addEventListener("click", this.boundCloseOnClickOutside)
11  }
12
13  disconnect() {
14    // Clean up the global listener when the controller is disconnected.
15    document.removeEventListener("click", this.boundCloseOnClickOutside)
16  }
17
18  // Toggles the visibility of the dropdown menu.
19  toggle() {
20    this.menuTarget.classList.toggle("hidden")
21  }
22
23  // Closes the dropdown if the click is outside of the controller's element.
24  closeOnClickOutside(event) {
25    if (!this.element.contains(event.target)) {
26      this.menuTarget.classList.add("hidden")
27    }
28  }
29};