feat: properly destroy objects on disconnect from dom

assets/controllers/autocomplete_controller.js

@@ -46,7 +46,7 @@ export default class extends Controller {
             }))
         }
 
-        new Autocomplete(this.element, {
+        this.autocomplete = new Autocomplete(this.element, {
             search: searchHandler,
             getResultValue: result => result.text,
             submitOnEnter: true,
@@ -58,6 +58,7 @@ export default class extends Controller {
             this.selectedValue = true
         }
 
+        // prevent form submission when selecting entry in autocomplete list with enter key
         this.element.addEventListener('keypress', e => {
             if (e.key === 'Enter') {
                 e.preventDefault()
@@ -76,4 +77,8 @@ export default class extends Controller {
         this.resetButtonTarget.classList.toggle('hidden', false === this.selectedValue)
         this.searchIconTarget.classList.toggle('hidden', this.selectedValue)
     }
+
+    disconnect() {
+        this.autocomplete.destroy()
+    }
 }

assets/controllers/sortable_controller.js

@@ -7,7 +7,7 @@ export default class extends Controller {
     static targets = ['item', 'handle']
 
     connect() {
-        new Sortable(this.element, {
+        this.sortable = new Sortable(this.element, {
             item: '[data-sortable-target="item"]',
             handle: '[data-sortable-target="handle"]',
             onEnd: e => {
@@ -31,4 +31,8 @@ export default class extends Controller {
             body: JSON.stringify({ ordering: ordering })
         })
     }
+
+    disconnect() {
+        this.sortable.destroy()
+    }
 }

assets/controllers/tooltip_controller.js

@@ -31,6 +31,10 @@ export default class extends Controller {
         } else {
             element = this.element
         }
-        tippy(element, options)
+        this.tooltip = tippy(element, options)
+    }
+
+    disconnect() {
+        this.tooltip.destroy()
     }
 }

assets/controllers/upload_collection_controller.js

@@ -22,7 +22,7 @@ export default class extends Controller {
     connect () {
         useFetch(this)
 
-        const dropzone = new Dropzone(this.dropzoneTarget, {
+        this.dropzone = new Dropzone(this.dropzoneTarget, {
             url: this.endpointUploadValue,
             withCredentials: true,
             maxFiles: this.maxFilesValue,
@@ -42,15 +42,15 @@ export default class extends Controller {
             dictMaxFilesExceeded: this.languageValue.maxFilesExceeded,
         })
 
-        dropzone.on('addedfile', file => {
+        this.dropzone.on('addedfile', file => {
             this.errorsTarget.classList.add('hidden')
         })
 
-        dropzone.on('removedfile', (file) => {
+        this.dropzone.on('removedfile', (file) => {
             fetch(`${this.endpointDeleteValue}?uuid=${file.upload.uuid}`, { method: 'delete', credentials: 'include' })
         })
 
-        dropzone.on('sending', (file, xhr, formData) => {
+        this.dropzone.on('sending', (file, xhr, formData) => {
             if (this.hasParamsValue) {
                 let keys = Object.keys(this.paramsValue)
                 keys.forEach(key => {
@@ -62,14 +62,18 @@ export default class extends Controller {
             window.dispatchEvent(new CustomEvent('dropzone:uploading'))
         })
 
-        dropzone.on('queuecomplete', () => {
+        this.dropzone.on('queuecomplete', () => {
             window.dispatchEvent(new CustomEvent('dropzone:complete'))
         })
 
-        dropzone.on('error', (file, errorMessage) => {
+        this.dropzone.on('error', (file, errorMessage) => {
             this.errorsTarget.innerText = errorMessage
             this.errorsTarget.classList.remove('hidden')
             dropzone.removeFile(file)
         })
     }
+
+    disconnect() {
+        this.dropzone.destroy()
+    }
 }