IssueNotes: Resize comment form after note submit and discard.acet-fix-comment-form-resize

2 files changed, 22 insertions, 0 deletions

diff --git a/app/assets/javascripts/notes/components/issue_comment_form.vue b/app/assets/javascripts/notes/components/issue_comment_form.vue
index 16f4e22aa9b..183d8e5aa38 100644
--- a/app/assets/javascripts/notes/components/issue_comment_form.vue
+++ b/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.
diff --git a/spec/javascripts/notes/components/issue_comment_form_spec.js b/spec/javascripts/notes/components/issue_comment_form_spec.js
index cca5ec887a3..1c8b1b98242 100644
--- a/spec/javascripts/notes/components/issue_comment_form_spec.js
+++ b/spec/javascripts/notes/components/issue_comment_form_spec.js
@@ -1,4 +1,5 @@
 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();