Improvements to Stimulus automatic event handling (#526)

frontend/js/controllers/application_controller.js

@@ -3,9 +3,21 @@ import { Controller } from '@hotwired/stimulus'
 import { fetchWithErrorHandling, fetchTurboStream } from '../core/fetch'
 
 export default class extends Controller {
-  appendAction (event, action, element = this.element) {
-    const actions = element.dataset.action ? element.dataset.action.split(' ') : []
-    actions.push(`${event}->${this.identifier}#${action}`)
+  appendAction (event, method, element = this.element) {
+    const actions = this.actionsList(element)
+    const newAction = `${event}->${this.identifier}#${method}`
+
+    if (!actions.includes(newAction)) {
+      actions.push(newAction)
+    }
+
+    element.dataset.action = actions.join(' ')
+  }
+
+  removeAction (event, method, element = this.element) {
+    const newAction = `${event}->${this.identifier}#${method}`
+    const actions = this.actionsList(element).filter(action => action !== newAction)
+
     element.dataset.action = actions.join(' ')
   }
 
@@ -17,6 +29,14 @@ export default class extends Controller {
     return fetchTurboStream(url, options)
   }
 
+  actionsList (element) {
+    if (element.dataset.action) {
+      return element.dataset.action.split(' ')
+    } else {
+      return []
+    }
+  }
+
   get csrfToken () {
     return document.querySelector("[name='csrf-token']").content
   }