Merge branch 'ps-fix-attach-a-file' into 'master'

Fix "Attach a file" not working after entering text

See merge request gitlab-org/gitlab!44216

app/assets/javascripts/gl_form.js

@@ -6,7 +6,14 @@ import { addMarkdownListeners, removeMarkdownListeners } from './lib/utils/text_
 import { disableButtonIfEmptyField } from '~/lib/utils/common_utils';
 
 export default class GLForm {
-  constructor(form, enableGFM = {}) {
+  /**
+   * Create a GLForm
+   *
+   * @param {jQuery} form Root element of the GLForm
+   * @param {Object} enableGFM Which autocomplete features should be enabled?
+   * @param {Boolean} forceNew If true, treat the element as a **new** form even if `gfm-form` class already exists.
+   */
+  constructor(form, enableGFM = {}, forceNew = false) {
     this.form = form;
     this.textarea = this.form.find('textarea.js-gfm-input');
     this.enableGFM = { ...defaultAutocompleteConfig, ...enableGFM };
@@ -22,7 +29,7 @@ export default class GLForm {
     // Before we start, we should clean up any previous data for this form
     this.destroy();
     // Set up the form
-    this.setupForm();
+    this.setupForm(forceNew);
     this.form.data('glForm', this);
   }
 
@@ -39,8 +46,8 @@ export default class GLForm {
     this.form.data('glForm', null);
   }
 
-  setupForm() {
-    const isNewForm = this.form.is(':not(.gfm-form)');
+  setupForm(forceNew = false) {
+    const isNewForm = this.form.is(':not(.gfm-form)') || forceNew;
     this.form.removeClass('js-new-note-form');
     if (isNewForm) {
       this.form.find('.div-dropzone').remove();

app/assets/javascripts/vue_shared/components/markdown/field.vue

@@ -167,7 +167,9 @@ export default {
   },
   mounted() {
     // GLForm class handles all the toolbar buttons
-    return new GLForm($(this.$refs['gl-form']), {
+    return new GLForm(
+      $(this.$refs['gl-form']),
+      {
         emojis: this.enableAutocomplete,
         members: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         issues: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
@@ -177,7 +179,9 @@ export default {
         labels: this.enableAutocomplete && !this.glFeatures.tributeAutocomplete,
         snippets: this.enableAutocomplete,
         vulnerabilities: this.enableAutocomplete,
-    });
+      },
+      true,
+    );
   },
   beforeDestroy() {
     const glForm = $(this.$refs['gl-form']).data('glForm');
@@ -230,7 +234,7 @@ export default {
   <div
     ref="gl-form"
     :class="{ 'gl-mt-3 gl-mb-3': addSpacingClasses }"
-    class="js-vue-markdown-field md-area position-relative"
+    class="js-vue-markdown-field md-area position-relative gfm-form"
   >
     <markdown-header
       :preview-markdown="previewMarkdown"

changelogs/unreleased/ps-fix-attach-a-file.yml

+---
+title: Fix attach file button not working in description fields
+merge_request: 44216
+author:
+type: fixed

spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap

@@ -24,7 +24,7 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
     </div>
      
     <div
-      class="js-vue-markdown-field md-area position-relative js-expanded gfm-form"
+      class="js-vue-markdown-field md-area position-relative gfm-form js-expanded"
     >
       <markdown-header-stub
         linecontent=""