fix

app/javascript/controllers/menu_controller.js

@@ -17,6 +17,7 @@ export default class extends Controller {
     show: Boolean,
     placement: { type: String, default: "bottom-end" },
     offset: { type: Number, default: 6 },
+    disableOnMobile: { type: Boolean, default: false }
   };
 
   // Tailwind's sm breakpoint
@@ -89,8 +90,7 @@ export default class extends Controller {
   }
 
   startAutoUpdate() {
-    // Only run autoUpdate on desktop screens
-    if (this.isDesktop && !this._cleanup) {
+    if ((!this.disableOnMobileValue || this.isDesktop) && !this._cleanup) {
       this._cleanup = autoUpdate(
         this.buttonTarget,
         this.contentTarget,
@@ -111,9 +111,7 @@ export default class extends Controller {
   }
 
   update() {
-    // Only compute position on desktop screens
-    if (!this.isDesktop) {
-      // Ensure floating styles are removed if switching from desktop to mobile while open
+    if (this.disableOnMobileValue && !this.isDesktop) {
       Object.assign(this.contentTarget.style, {
         position: "",
         left: "",

app/views/transactions/searches/_form.html.erb

@@ -23,7 +23,7 @@
       </div>
     </div>
 
-    <div data-controller="menu" class="relative">
+    <div data-controller="menu" data-menu-disable-on-mobile-value="true" class="relative">
       <!-- Desktop button -->
       <button id="transaction-filters-button" data-menu-target="button" type="button" class="btn border-0 absolute right-2 sm:border-1 sm:right-0 sm:relative sm:flex btn--outline items-center gap-2">
         <%= lucide_icon("list-filter", class: "w-5 h-5 text-secondary") %>