diff --git a/app/javascript/controllers/dropdown_controller.js b/app/javascript/controllers/dropdown_controller.js
index 3a5bf58b..a4ab376a 100644
--- a/app/javascript/controllers/dropdown_controller.js
+++ b/app/javascript/controllers/dropdown_controller.js
@@ -3,6 +3,7 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="dropdown"
 export default class extends Controller {
   static targets = ["menu"]
+  static values = { closeOnClick: { type: Boolean, default: true } }
 
   toggleMenu = (e) => {
     e.stopPropagation(); // Prevent event from closing the menu immediately
@@ -24,7 +25,7 @@ export default class extends Controller {
   }
 
   onDocumentClick = (e) => {
-    if (this.menuTarget.contains(e.target)) {
+    if (this.menuTarget.contains(e.target) && !this.closeOnClickValue ) {
       // user has clicked inside of the dropdown
       e.stopPropagation();
       return;
diff --git a/app/views/transactions/_category_dropdown.html.erb b/app/views/transactions/_category_dropdown.html.erb
index 46fe8b44..bf96369e 100644
--- a/app/views/transactions/_category_dropdown.html.erb
+++ b/app/views/transactions/_category_dropdown.html.erb
@@ -1,5 +1,5 @@
 <%# locals: (transaction:) %>
-<div class="relative" data-controller="dropdown">
+<div class="relative" data-controller="dropdown" data-dropdown-close-on-click-value="false">
   <div class="flex cursor-pointer" data-action="click->dropdown#toggleMenu">
     <%= render partial: "shared/category_badge", locals: transaction.category.nil? ? {} : { name: transaction.category.name, color: transaction.category.color } %>
   </div>