From efd96f606cd07d6afa8638114a21f521498d6d85 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <95735295+shrestha-bishal@users.noreply.github.com>
Date: Sun, 3 Aug 2025 15:35:34 +1000
Subject: [PATCH] added multi_select_controller and added multi-select support
 for tags without Ctrl/Shift in transaction forms (#55)

* added multi_select_controller and added multi-select support for tags without Ctrl/Shift in transaction forms

* fix: prevent memory leak by properly cleaning up event listener in multi-select controller

* chore: updated indentation
---
 .../controllers/multi_select_controller.js    | 21 +++++++++++++++++++
 app/views/transactions/_form.html.erb         |  3 ++-
 app/views/transactions/show.html.erb          |  3 ++-
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/controllers/multi_select_controller.js

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 %>