feat: improve multiselect field

assets/controllers/multiselect_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from '@hotwired/stimulus'
+import { useClickOutside } from 'stimulus-use'
 
 export default class extends Controller {
 
@@ -7,6 +8,7 @@ export default class extends Controller {
 
     connect() {
         this.update()
+        useClickOutside(this)
     }
 
     toggle() {
@@ -27,4 +29,9 @@ export default class extends Controller {
             this.labelTarget.innerText = this.placeholderValue
         }
     }
+
+    clickOutside(e) {
+        e.preventDefault()
+        this.dropdownTarget.classList.toggle('hidden', true)
+    }
 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "myep-team",
-    "devDependencies": {
+    "dependencies": {
         "@babel/core": "^7.17.0",
         "@babel/preset-env": "^7.16.0",
         "@hotwired/stimulus": "^3.0.0",
@@ -14,12 +14,15 @@
         "dropzone": "^6.0.0-beta.2",
         "file-loader": "^6.2.0",
         "flatpickr": "^4.6.13",
-        "mjml": "^4.14.1",
+        "htmx.org": "^1.9.10",
+        "mjml": "^4.15.3",
         "postcss": "^8.4.29",
         "postcss-import": "^15.1.0",
         "postcss-loader": "^7.3.3",
         "pretty-bytes": "^6.1.1",
         "regenerator-runtime": "^0.13.9",
+        "sortablejs": "^1.15.0",
+        "stimulus-use": "^0.52.2",
         "tailwindcss": "^3.3.3",
         "tippy.js": "^6.3.7",
         "toastify-js": "^1.12.0",
@@ -34,9 +37,5 @@
         "watch": "encore dev --watch",
         "build": "encore production --progress",
         "mjml": "mjml assets/mjml/layout.mjml -o templates/email/layout.html.twig"
-    },
-    "dependencies": {
-        "htmx.org": "^1.9.10",
-        "sortablejs": "^1.15.0"
     }
 }

templates/forms.html.twig

@@ -226,7 +226,7 @@
             <div {{ stimulus_target('multiselect', 'label') }} class="flex-1 min-h-8 py-1.5 text-gray-900 text-sm"></div>
             {{ icon('dots', 'w-4 h-4 mt-2') }}
         </div>
-        <div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
+        <div {{ stimulus_target('multiselect', 'dropdown')}} class="absolute z-10 top-full -mt-1.5 left-0 inset-x-0 max-h-48 overflow-y-scroll px-3 py-2 bg-white shadow-lg rounded-md rounded-t-none border border-gray-300 border-t-0 hidden">
             {% for item in form.children %}
                 {{ form_row(item, { 'attr': { 'data-action': 'multiselect#update', 'data-multiselect-target': 'choice', 'data-label': item.vars.label } }) }}
             {% endfor %}