Merge branch 'acet-fix-comment-form-resize' into 'master'

IssueNotes: Resize comment form after note submit and discard.

Closes #38115

See merge request gitlab-org/gitlab-ce!14401

app/assets/javascripts/notes/components/issue_comment_form.vue

@@ -2,6 +2,7 @@
   /* global Flash, Autosave */
   import { mapActions, mapGetters } from 'vuex';
   import _ from 'underscore';
+  import autosize from 'vendor/autosize';
   import '../../autosave';
   import TaskList from '../../task_list';
   import * as constants from '../constants';
@@ -124,6 +125,7 @@
           }
           this.isSubmitting = true;
           this.note = ''; // Empty textarea while being requested. Repopulate in catch
+          this.resizeTextarea();
 
           this.saveNote(noteData)
             .then((res) => {
@@ -174,6 +176,7 @@
 
         if (shouldClear) {
           this.note = '';
+          this.resizeTextarea();
         }
 
         // reset autostave
@@ -205,6 +208,11 @@
           selector: '.notes',
         });
       },
+      resizeTextarea() {
+        this.$nextTick(() => {
+          autosize.update(this.$refs.textarea);
+        });
+      },
     },
     mounted() {
       // jQuery is needed here because it is a custom event being dispatched with jQuery.

spec/javascripts/notes/components/issue_comment_form_spec.js

 import Vue from 'vue';
+import autosize from 'vendor/autosize';
 import store from '~/notes/stores';
 import issueCommentForm from '~/notes/components/issue_comment_form.vue';
 import { loggedOutIssueData, notesDataMock, userDataMock, issueDataMock } from '../mock_data';
@@ -55,6 +56,19 @@ describe('issue_comment_form component', () => {
         expect(vm.$el.querySelector(`a[href="${quickActionsDocsPath}"]`).textContent.trim()).toEqual('quick actions');
       });
 
+      it('should resize textarea after note discarded', (done) => {
+        spyOn(autosize, 'update');
+        spyOn(vm, 'discard').and.callThrough();
+
+        vm.note = 'foo';
+        vm.discard();
+
+        Vue.nextTick(() => {
+          expect(autosize.update).toHaveBeenCalled();
+          done();
+        });
+      });
+
       describe('edit mode', () => {
         it('should enter edit mode when arrow up is pressed', () => {
           spyOn(vm, 'editCurrentUserLastNote').and.callThrough();