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

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);
+    }
+  }
+}

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"),

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