bug #1951 [Dropzone] Remove event listeners on disconnect (aleho)

This PR was merged into the 2.x branch.

Discussion
----------

[Dropzone] Remove event listeners on disconnect

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| License       | MIT

Events added in controller connect were not removed on disconnect. This would lead to events being triggered twice if a dropzone input is, e.g., moved in the DOM.

Commits
-------

0164705 [Dropzone] Remove event listeners on disconnect

Author: kbond

src/Dropzone/assets/dist/controller.d.ts

@@ -7,7 +7,9 @@ export default class extends Controller {
     readonly previewFilenameTarget: HTMLDivElement;
     readonly previewImageTarget: HTMLDivElement;
     static targets: string[];
+    initialize(): void;
     connect(): void;
+    disconnect(): void;
     clear(): void;
     onInputChange(event: any): void;
     _populateImagePreview(file: Blob): void;

src/Dropzone/assets/dist/controller.js

@@ -1,12 +1,20 @@
 import { Controller } from '@hotwired/stimulus';
 
 class default_1 extends Controller {
+    initialize() {
+        this.clear = this.clear.bind(this);
+        this.onInputChange = this.onInputChange.bind(this);
+    }
     connect() {
         this.clear();
-        this.previewClearButtonTarget.addEventListener('click', () => this.clear());
-        this.inputTarget.addEventListener('change', (event) => this.onInputChange(event));
+        this.previewClearButtonTarget.addEventListener('click', this.clear);
+        this.inputTarget.addEventListener('change', this.onInputChange);
         this.dispatchEvent('connect');
     }
+    disconnect() {
+        this.previewClearButtonTarget.removeEventListener('click', this.clear);
+        this.inputTarget.removeEventListener('change', this.onInputChange);
+    }
     clear() {
         this.inputTarget.value = '';
         this.inputTarget.style.display = 'block';

src/Dropzone/assets/src/controller.ts

@@ -21,19 +21,29 @@ export default class extends Controller {
 
     static targets = ['input', 'placeholder', 'preview', 'previewClearButton', 'previewFilename', 'previewImage'];
 
+    initialize() {
+        this.clear = this.clear.bind(this);
+        this.onInputChange = this.onInputChange.bind(this);
+    }
+
     connect() {
         // Reset when connecting to work with Turbolinks
         this.clear();
 
         // Clear on click on clear button
-        this.previewClearButtonTarget.addEventListener('click', () => this.clear());
+        this.previewClearButtonTarget.addEventListener('click', this.clear);
 
         // Listen on input change and display preview
-        this.inputTarget.addEventListener('change', (event) => this.onInputChange(event));
+        this.inputTarget.addEventListener('change', this.onInputChange);
 
         this.dispatchEvent('connect');
     }
 
+    disconnect() {
+        this.previewClearButtonTarget.removeEventListener('click', this.clear);
+        this.inputTarget.removeEventListener('change', this.onInputChange);
+    }
+
     clear() {
         this.inputTarget.value = '';
         this.inputTarget.style.display = 'block';