Fire native change event in select controller

TrestleAdmin · May 11, 2024 · c3e002f · c3e002f
1 parent 79cb256
commit c3e002f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/app/assets/bundle/trestle/bundle.js b/app/assets/bundle/trestle/bundle.js
diff --git a/frontend/js/controllers/select_controller.js b/frontend/js/controllers/select_controller.js
@@ -17,10 +17,24 @@ $.fn.select2.defaults.set('dropdownCssClass', function (el) {
 export default class extends ApplicationController {
   connect () {
     $(this.element).select2(this.options)
+
+    $(this.element).on('change.select2', (e) => {
+      if (!e.originalEvent) {
+        e.preventDefault()
+
+        const nativeEvent = new CustomEvent('change', {
+          bubbles: true,
+          cancelable: true
+        })
+
+        e.target.dispatchEvent(nativeEvent)
+      }
+    })
   }
 
   disconnect () {
     $(this.element).select2('destroy')
+    $(this.element).off('change.select2')
   }
 
   get options () {