From 2c3752668a153d8fff2918a8c1fa14de8091ac34 Mon Sep 17 00:00:00 2001
From: Jakub Kottnauer <jk@jakubkottnauer.com>
Date: Mon, 11 Mar 2024 22:42:18 +0100
Subject: [PATCH] Fix event handler removal on disconnect (#540)

* Fix event handler removal on disconnect

* Fix tab controller
---
 .../controllers/account_collapse_controller.js   |  8 +++-----
 .../controllers/auto_submit_form_controller.js   |  8 +++-----
 .../controllers/line_chart_controller.js         |  6 +++---
 app/javascript/controllers/tabs_controller.js    | 16 +++++++---------
 .../controllers/trendline_controller.js          |  6 +++---
 5 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/app/javascript/controllers/account_collapse_controller.js b/app/javascript/controllers/account_collapse_controller.js
index 2f453198..9e597eea 100644
--- a/app/javascript/controllers/account_collapse_controller.js
+++ b/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.boundOnToggle)
+    this.element.addEventListener("toggle", this.onToggle)
     this.updateFromLocalStorage()
   }
 
   disconnect() {
-    this.element.removeEventListener("toggle", this.boundOnToggle)
+    this.element.removeEventListener("toggle", this.onToggle)
   }
 
-  onToggle() {
+  onToggle = () => {
     if (this.initialToggle) {
       this.initialToggle = false
       return
diff --git a/app/javascript/controllers/auto_submit_form_controller.js b/app/javascript/controllers/auto_submit_form_controller.js
index d1ab1c50..f59b9127 100644
--- a/app/javascript/controllers/auto_submit_form_controller.js
+++ b/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.selectElements.forEach(el => el.addEventListener('change', this.handler.bind(this)));
+    [...this.inputElements, ...this.selectElements].forEach(el => el.addEventListener('change', this.handler));
   }
 
   disconnect() {
-    this.inputElements.forEach(el => el.removeEventListener('change', this.handler.bind(this)));
-    this.selectElements.forEach(el => el.removeEventListener('change', this.handler.bind(this)));
+    [...this.inputElements, ...this.selectElements].forEach(el => el.removeEventListener('change', this.handler));
   }
 
-  handler(e) {
+  handler = (e) => {
     console.log(e);
     this.element.requestSubmit();
   }
diff --git a/app/javascript/controllers/line_chart_controller.js b/app/javascript/controllers/line_chart_controller.js
index d6820e4b..2d16079a 100644
--- a/app/javascript/controllers/line_chart_controller.js
+++ b/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);
   }
 
diff --git a/app/javascript/controllers/tabs_controller.js b/app/javascript/controllers/tabs_controller.js
index 5dc674a4..c0e4f844 100644
--- a/app/javascript/controllers/tabs_controller.js
+++ b/app/javascript/controllers/tabs_controller.js
@@ -8,24 +8,22 @@ export default class extends Controller {
 
   connect() {
     this.updateClasses(this.defaultTabValue);
-    document.addEventListener(
-      "turbo:load",
-      this.updateClasses.bind(this, this.defaultTabValue)
-    );
+    document.addEventListener("turbo:load", this.onTurboLoad);
   }
 
   disconnect() {
-    document.removeEventListener(
-      "turbo:load",
-      this.updateClasses.bind(this, this.defaultTabValue)
-    );
+    document.removeEventListener("turbo:load", this.onTurboLoad);
   }
 
   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"));
 
diff --git a/app/javascript/controllers/trendline_controller.js b/app/javascript/controllers/trendline_controller.js
index 813f8ec9..2127fb10 100644
--- a/app/javascript/controllers/trendline_controller.js
+++ b/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);
   }