From 8f56aa287713b39abfc8d04ee92b87b6046c5609 Mon Sep 17 00:00:00 2001
From: Pieter <ptr@arcsec.org>
Date: Mon, 12 Jan 2026 22:08:59 +0100
Subject: [PATCH] Fix duplicate category menu IDs for mobile/desktop

Mobile and desktop transaction category menus now use
variant-specific DOM IDs and the turbo stream response
updates both targets. This prevents duplicate IDs that
caused the menu not to close on first click on desktop.
---
 .../transaction_categories_controller.rb         | 11 ++++++++---
 app/views/transactions/_transaction.html.erb     |  4 ++--
 .../transactions/_transaction_category.html.erb  |  4 ++--
 app/views/transfers/update.turbo_stream.erb      | 16 ++++++++++++----
 4 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/app/controllers/transaction_categories_controller.rb b/app/controllers/transaction_categories_controller.rb
index 3fe8207dc..d8fc64e96 100644
--- a/app/controllers/transaction_categories_controller.rb
+++ b/app/controllers/transaction_categories_controller.rb
@@ -24,9 +24,14 @@ class TransactionCategoriesController < ApplicationController
       format.turbo_stream do
         render turbo_stream: [
           turbo_stream.replace(
-            dom_id(transaction, :category_menu),
-            partial: "categories/menu",
-            locals: { transaction: transaction }
+            dom_id(transaction, "category_menu_mobile"),
+            partial: "transactions/transaction_category",
+            locals: { transaction: transaction, variant: "mobile" }
+          ),
+          turbo_stream.replace(
+            dom_id(transaction, "category_menu_desktop"),
+            partial: "transactions/transaction_category",
+            locals: { transaction: transaction, variant: "desktop" }
           ),
           turbo_stream.replace(
             "category_name_mobile_#{transaction.id}",
diff --git a/app/views/transactions/_transaction.html.erb b/app/views/transactions/_transaction.html.erb
index ec89bb308..467bec3db 100644
--- a/app/views/transactions/_transaction.html.erb
+++ b/app/views/transactions/_transaction.html.erb
@@ -36,7 +36,7 @@
               <% end %>
             </div>
             <div class="flex md:hidden items-center gap-1 col-span-2 relative">
-              <%= render "transactions/transaction_category", transaction: transaction %>
+              <%= render "transactions/transaction_category", transaction: transaction, variant: "mobile" %>
               <% if transaction.merchant&.logo_url.present? %>
                 <%= image_tag transaction.merchant.logo_url,
                     class: "w-5 h-5 rounded-full absolute -bottom-1 -right-1 border border-secondary pointer-events-none",
@@ -137,7 +137,7 @@
       </div>
 
       <div class="hidden md:flex items-center gap-1 col-span-2">
-        <%= render "transactions/transaction_category", transaction: transaction %>
+        <%= render "transactions/transaction_category", transaction: transaction, variant: "desktop" %>
       </div>
 
       <div class="shrink-0 col-span-4 lg:col-span-2 ml-auto text-right">
diff --git a/app/views/transactions/_transaction_category.html.erb b/app/views/transactions/_transaction_category.html.erb
index e124c0213..3b5c8d1b9 100644
--- a/app/views/transactions/_transaction_category.html.erb
+++ b/app/views/transactions/_transaction_category.html.erb
@@ -1,6 +1,6 @@
-<%# locals: (transaction:) %>
+<%# locals: (transaction:, variant:) %>
 
-<div id="<%= dom_id(transaction, "category_menu") %>">
+<div id="<%= dom_id(transaction, "category_menu_#{variant}") %>">
   <% if transaction.transfer&.categorizable? || transaction.transfer.nil? %>
     <%= render "categories/menu", transaction: transaction %>
   <% else %>
diff --git a/app/views/transfers/update.turbo_stream.erb b/app/views/transfers/update.turbo_stream.erb
index 82a503d0f..929a63ab5 100644
--- a/app/views/transfers/update.turbo_stream.erb
+++ b/app/views/transfers/update.turbo_stream.erb
@@ -2,13 +2,21 @@
   <%= turbo_stream.replace @transfer.inflow_transaction.entry %>
   <%= turbo_stream.replace @transfer.outflow_transaction.entry %>
 
-  <%= turbo_stream.replace dom_id(@transfer.inflow_transaction, "category_menu"),
+  <%= turbo_stream.replace dom_id(@transfer.inflow_transaction, "category_menu_mobile"),
                           partial: "transactions/transaction_category",
-                          locals: { transaction: @transfer.inflow_transaction } %>
+                          locals: { transaction: @transfer.inflow_transaction, variant: "mobile" } %>
 
-  <%= turbo_stream.replace dom_id(@transfer.outflow_transaction, "category_menu"),
+  <%= turbo_stream.replace dom_id(@transfer.inflow_transaction, "category_menu_desktop"),
                           partial: "transactions/transaction_category",
-                          locals: { transaction: @transfer.outflow_transaction } %>
+                          locals: { transaction: @transfer.inflow_transaction, variant: "desktop" } %>
+
+  <%= turbo_stream.replace dom_id(@transfer.outflow_transaction, "category_menu_mobile"),
+                          partial: "transactions/transaction_category",
+                          locals: { transaction: @transfer.outflow_transaction, variant: "mobile" } %>
+
+  <%= turbo_stream.replace dom_id(@transfer.outflow_transaction, "category_menu_desktop"),
+                          partial: "transactions/transaction_category",
+                          locals: { transaction: @transfer.outflow_transaction, variant: "desktop" } %>
 
   <%= turbo_stream.replace dom_id(@transfer.inflow_transaction, "transfer_match"),
                           partial: "transactions/transfer_match",