diff --git a/app/javascript/controllers/multi_select_controller.js b/app/javascript/controllers/multi_select_controller.js
new file mode 100644
index 000000000..6bd050710
--- /dev/null
+++ b/app/javascript/controllers/multi_select_controller.js
@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  connect() {
+    this.element.addEventListener('mousedown', this.toggleOption);
+  }
+
+  disconnect() {
+    this.element.removeEventListener('mousedown', this.toggleOption);
+  }
+
+  toggleOption = (e) => {
+    const option = e.target;
+    if (option.tagName === 'OPTION') {
+      e.preventDefault();
+      option.selected = !option.selected;
+      const event = new Event('change', { bubbles: true });
+      this.element.dispatchEvent(event);
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/views/transactions/_form.html.erb b/app/views/transactions/_form.html.erb
index 3760f7dd0..48f27d1af 100644
--- a/app/views/transactions/_form.html.erb
+++ b/app/views/transactions/_form.html.erb
@@ -38,7 +38,8 @@
                       multiple: true,
                       label:    t(".tags_label"),
                       container_class: "h-40"
-                    } %>
+                    },
+                    { "data-controller": "multi-select" } %>
     <% end %>
     <%= f.text_area :notes,
                     label: t(".note_label"),
diff --git a/app/views/transactions/show.html.erb b/app/views/transactions/show.html.erb
index 4111cd437..9554fabe6 100644
--- a/app/views/transactions/show.html.erb
+++ b/app/views/transactions/show.html.erb
@@ -84,7 +84,8 @@
                       label:    t(".tags_label"),
                       container_class: "h-40"
                     },
-                    { "data-auto-submit-form-target": "auto" } %>
+                    { "data-controller": "multi-select", "data-auto-submit-form-target": "auto" } 
+              %>
             <% end %>
           <% end %>