Move Autosize logic to MarkdownField

2 files changed, 21 insertions, 10 deletions

diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 6348441f692..06b0b850941 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -2,7 +2,6 @@
 import $ from 'jquery';
 import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
-import Autosize from 'autosize';
 import { __, sprintf } from '~/locale';
 import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue';
 import Flash from '../../flash';
@@ -191,7 +190,6 @@ export default {
         }
 
         this.note = ''; // Empty textarea while being requested. Repopulate in catch
-        this.resizeTextarea();
         this.stopPolling();
 
         this.saveNote(noteData)
@@ -273,8 +271,6 @@ Please check your network connection and try again.`;
 
       if (shouldClear) {
         field.clear();
-
-        this.resizeTextarea();
       }
 
       // `focus` is needed to remain cursor in the textarea.
@@ -292,11 +288,6 @@ Please check your network connection and try again.`;
         });
       }
     },
-    resizeTextarea() {
-      this.$nextTick(() => {
-        Autosize.update(this.$refs.textarea);
-      });
-    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index 49d941a7763..f9c66909311 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -2,6 +2,7 @@
 import $ from 'jquery';
 import _ from 'underscore';
 import { getDraft, updateDraft, clearDraft } from '~/lib/utils/autosave';
+import Autosize from 'autosize';
 import { __ } from '~/locale';
 import { stripHtml } from '~/lib/utils/text_utility';
 import Flash from '../../../flash';
@@ -176,7 +177,13 @@ export default {
   },
   watch: {
     mode() {
-      this.$nextTick(this.focus);
+      this.$nextTick(() => {
+        this.focus();
+
+        if (this.modeIsMarkdown) {
+          this.autosizeTextarea();
+        }
+      });
     },
     needsMarkdownRender() {
       if (this.needsMarkdownRender) {
@@ -195,6 +202,10 @@ export default {
       if (this.autosaveKey.length) {
         updateDraft(this.autosaveKey, this.currentValue);
       }
+
+      if (this.modeIsMarkdown) {
+        this.$nextTick(this.autosizeTextarea);
+      }
     },
   },
   mounted() {
@@ -219,12 +230,17 @@ export default {
         this.setCurrentValue(draft);
       }
     }
+
+    Autosize(this.$refs.textarea);
+    this.autosizeTextarea();
   },
   beforeDestroy() {
     const glForm = $(this.$refs['gl-form']).data('glForm');
     if (glForm) {
       glForm.destroy();
     }
+
+    Autosize.destroy(this.$refs.textarea);
   },
   methods: {
     setMode(newMode) {
@@ -310,6 +326,10 @@ export default {
       $(this.$refs.markdownPreview).renderGFM();
     },
 
+    autosizeTextarea() {
+      Autosize.update(this.$refs.textarea);
+    },
+
     toolbarButtonClicked(button) {
       updateText({
         textArea: this.$refs.textarea,