Add auto update to keep dropdown positioned correctly

Author: lsouoliveira

lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-import { computePosition, flip, shift, offset } from "@floating-ui/dom";
+import { computePosition, flip, shift, offset, autoUpdate } from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
@@ -12,11 +12,20 @@ export default class extends Controller {
       type: Object,
       default: {},
     },
-  }
+  };
 
   connect() {
     this.boundHandleKeydown = this.#handleKeydown.bind(this); // Bind the function so we can remove it later
     this.selectedIndex = -1;
+    this.cleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentTarget,
+      this.#computeTooltip.bind(this),
+    );
+  }
+
+  disconnect() {
+    this.cleanup();
   }
 
   #computeTooltip() {
@@ -40,14 +49,16 @@ export default class extends Controller {
   }
 
   toggle() {
-    this.contentTarget.classList.contains("hidden") ? this.#open() : this.close();
+    this.contentTarget.classList.contains("hidden")
+      ? this.#open()
+      : this.close();
   }
 
   #open() {
     this.openValue = true;
     this.#deselectAll();
     this.#addEventListeners();
-    this.#computeTooltip()
+    this.#computeTooltip();
     this.contentTarget.classList.remove("hidden");
   }
 
@@ -59,15 +70,17 @@ export default class extends Controller {
 
   #handleKeydown(e) {
     // return if no menu items (one line fix for)
-    if (this.menuItemTargets.length === 0) { return; }
+    if (this.menuItemTargets.length === 0) {
+      return;
+    }
 
-    if (e.key === 'ArrowDown') {
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       this.#updateSelectedItem(1);
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       this.#updateSelectedItem(-1);
-    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
       this.menuItemTargets[this.selectedIndex].click();
     }
@@ -76,7 +89,7 @@ export default class extends Controller {
   #updateSelectedItem(direction) {
     // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
     this.menuItemTargets.forEach((item, index) => {
-      if (item.getAttribute('aria-selected') === 'true') {
+      if (item.getAttribute("aria-selected") === "true") {
         this.selectedIndex = index;
       }
     });
@@ -99,22 +112,24 @@ export default class extends Controller {
   #toggleAriaSelected(element, isSelected) {
     // Add or remove attribute
     if (isSelected) {
-      element.setAttribute('aria-selected', 'true');
+      element.setAttribute("aria-selected", "true");
     } else {
-      element.removeAttribute('aria-selected');
+      element.removeAttribute("aria-selected");
     }
   }
 
   #deselectAll() {
-    this.menuItemTargets.forEach(item => this.#toggleAriaSelected(item, false));
+    this.menuItemTargets.forEach((item) =>
+      this.#toggleAriaSelected(item, false),
+    );
     this.selectedIndex = -1;
   }
 
   #addEventListeners() {
-    document.addEventListener('keydown', this.boundHandleKeydown);
+    document.addEventListener("keydown", this.boundHandleKeydown);
   }
 
   #removeEventListeners() {
-    document.removeEventListener('keydown', this.boundHandleKeydown);
+    document.removeEventListener("keydown", this.boundHandleKeydown);
   }
 }