Destroy Dropzone hidden input when form is destroyed

When a user clicks inside a Vue textarea (either new comment or editing
existing), we create a new `.dz-hidden-input` when Dropzone is
initialized. However, if `Cancel` or `Confirm` is clicked, those
elements remain.

To fix this, we call Dropzone's `destroy()` method to clean up these
hidden elements.

Closes https://gitlab.com/gitlab-org/gitlab/issues/209026

app/assets/javascripts/gl_form.js

@@ -29,6 +29,10 @@ export default class GLForm {
     if (this.autoComplete) {
       this.autoComplete.destroy();
     }
+    if (this.formDropzone) {
+      this.formDropzone.destroy();
+    }
+
     this.form.data('glForm', null);
   }
 
@@ -45,7 +49,7 @@ export default class GLForm {
       );
       this.autoComplete = new GfmAutoComplete(gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources);
       this.autoComplete.setup(this.form.find('.js-gfm-input'), this.enableGFM);
-      dropzoneInput(this.form, { parallelUploads: 1 });
+      this.formDropzone = dropzoneInput(this.form, { parallelUploads: 1 });
       autosize(this.textarea);
     }
     // form and textarea event listeners

changelogs/unreleased/sh-destroy-dropzone-hidden-input.yml

+---
+title: Destroy Dropzone hidden input when form is destroyed
+merge_request: 29882
+author:
+type: fixed