From d76b50a808befab9688de0a3ef3abd1051da284f Mon Sep 17 00:00:00 2001 From: Jakub Kottnauer Date: Mon, 11 Mar 2024 21:07:07 +0100 Subject: [PATCH 1/2] Fix event handler removal on disconnect --- .../controllers/account_collapse_controller.js | 8 +++----- .../controllers/auto_submit_form_controller.js | 8 +++----- app/javascript/controllers/line_chart_controller.js | 6 +++--- app/javascript/controllers/tabs_controller.js | 12 +++--------- app/javascript/controllers/trendline_controller.js | 6 +++--- 5 files changed, 15 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..300ba657 100644 --- a/app/javascript/controllers/tabs_controller.js +++ b/app/javascript/controllers/tabs_controller.js @@ -8,24 +8,18 @@ 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.updateClasses); } disconnect() { - document.removeEventListener( - "turbo:load", - this.updateClasses.bind(this, this.defaultTabValue) - ); + document.removeEventListener("turbo:load", this.updateClasses); } select(event) { this.updateClasses(event.target.dataset.id); } - updateClasses(selectedId) { + updateClasses = (selectedId = this.defaultTabValue) => { 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); } -- 2.53.0 From 2315d37e60b2076e9d02426eefdac72d62ed8ffd Mon Sep 17 00:00:00 2001 From: Jakub Kottnauer Date: Mon, 11 Mar 2024 22:10:48 +0100 Subject: [PATCH 2/2] Fix tab controller --- app/javascript/controllers/tabs_controller.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/javascript/controllers/tabs_controller.js b/app/javascript/controllers/tabs_controller.js index 300ba657..c0e4f844 100644 --- a/app/javascript/controllers/tabs_controller.js +++ b/app/javascript/controllers/tabs_controller.js @@ -8,18 +8,22 @@ export default class extends Controller { connect() { this.updateClasses(this.defaultTabValue); - document.addEventListener("turbo:load", this.updateClasses); + document.addEventListener("turbo:load", this.onTurboLoad); } disconnect() { - document.removeEventListener("turbo:load", this.updateClasses); + document.removeEventListener("turbo:load", this.onTurboLoad); } select(event) { this.updateClasses(event.target.dataset.id); } - updateClasses = (selectedId = this.defaultTabValue) => { + onTurboLoad = () => { + this.updateClasses(this.defaultTabValue); + } + + updateClasses = (selectedId) => { this.btnTargets.forEach((btn) => btn.classList.remove(this.activeClass)); this.tabTargets.forEach((tab) => tab.classList.add("hidden")); -- 2.53.0