Fix event handler removal on disconnect (#540)

* Fix event handler removal on disconnect

* Fix tab controller

app/javascript/controllers/account_collapse_controller.js

@@ -3,21 +3,19 @@ import { Controller } from "@hotwired/stimulus"
 // Connects to data-controller="account-collapse"
 export default class extends Controller {
   static values = { type: String }
-  boundOnToggle = null
   initialToggle = false
   STORAGE_NAME = "accountCollapseStates"
 
   connect() {
-    this.boundOnToggle = this.onToggle.bind(this)
+    this.element.addEventListener("toggle", this.onToggle)
-    this.element.addEventListener("toggle", this.boundOnToggle)
     this.updateFromLocalStorage()
   }
 
   disconnect() {
-    this.element.removeEventListener("toggle", this.boundOnToggle)
+    this.element.removeEventListener("toggle", this.onToggle)
   }
 
-  onToggle() {
+  onToggle = () => {
     if (this.initialToggle) {
       this.initialToggle = false
       return

app/javascript/controllers/auto_submit_form_controller.js

@@ -15,16 +15,14 @@ export default class extends Controller {
   }
 
   connect() {
-    this.inputElements.forEach(el => el.addEventListener('change', this.handler.bind(this)));
+    [...this.inputElements, ...this.selectElements].forEach(el => el.addEventListener('change', this.handler));
-    this.selectElements.forEach(el => el.addEventListener('change', this.handler.bind(this)));
   }
 
   disconnect() {
-    this.inputElements.forEach(el => el.removeEventListener('change', this.handler.bind(this)));
+    [...this.inputElements, ...this.selectElements].forEach(el => el.removeEventListener('change', this.handler));
-    this.selectElements.forEach(el => el.removeEventListener('change', this.handler.bind(this)));
   }
 
-  handler(e) {
+  handler = (e) => {
     console.log(e);
     this.element.requestSubmit();
   }

app/javascript/controllers/line_chart_controller.js

@@ -8,14 +8,14 @@ export default class extends Controller {
 
   connect() {
     this.renderChart(this.seriesValue);
-    document.addEventListener("turbo:load", this.renderChart.bind(this));
+    document.addEventListener("turbo:load", this.renderChart);
   }
 
   disconnect() {
-    document.removeEventListener("turbo:load", this.renderChart.bind(this));
+    document.removeEventListener("turbo:load", this.renderChart);
   }
 
-  renderChart() {
+  renderChart = () => {
     this.drawChart(this.seriesValue);
   }
 

app/javascript/controllers/tabs_controller.js

@@ -8,24 +8,22 @@ export default class extends Controller {
 
   connect() {
     this.updateClasses(this.defaultTabValue);
-    document.addEventListener(
+    document.addEventListener("turbo:load", this.onTurboLoad);
-      "turbo:load",
-      this.updateClasses.bind(this, this.defaultTabValue)
-    );
   }
 
   disconnect() {
-    document.removeEventListener(
+    document.removeEventListener("turbo:load", this.onTurboLoad);
-      "turbo:load",
-      this.updateClasses.bind(this, this.defaultTabValue)
-    );
   }
 
   select(event) {
     this.updateClasses(event.target.dataset.id);
   }
 
-  updateClasses(selectedId) {
+  onTurboLoad = () => {
+    this.updateClasses(this.defaultTabValue);
+  }
+
+  updateClasses = (selectedId) => {
     this.btnTargets.forEach((btn) => btn.classList.remove(this.activeClass));
     this.tabTargets.forEach((tab) => tab.classList.add("hidden"));
 

app/javascript/controllers/trendline_controller.js

@@ -7,14 +7,14 @@ export default class extends Controller {
 
   connect() {
     this.renderChart(this.seriesValue);
-    document.addEventListener("turbo:load", this.renderChart.bind(this));
+    document.addEventListener("turbo:load", this.renderChart);
   }
 
   disconnect() {
-    document.removeEventListener("turbo:load", this.renderChart.bind(this));
+    document.removeEventListener("turbo:load", this.renderChart);
   }
 
-  renderChart() {
+  renderChart = () => {
     this.drawChart(this.seriesValue);
   }