Add MarkdownField focus and blur methods

4 files changed, 33 insertions, 7 deletions

diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index 0dfe5422594..6ececac3a86 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -32,7 +32,7 @@ export default {
     },
   },
   mounted() {
-    this.$refs.textarea.focus();
+    this.$refs.markdownField.focus();
   },
 };
 </script>
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 89aa88f911a..cf6e9a75bdb 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -267,10 +267,8 @@ Please check your network connection and try again.`;
     },
     discard(shouldClear = true) {
       // `blur` is needed to clear slash commands autocomplete cache if event fired.
-      // `focus` is needed to remain cursor in the textarea.
-      this.$refs.textarea.blur();
-      this.$refs.textarea.focus();
       const field = this.$refs.markdownField;
+      field.blur();
 
       if (shouldClear) {
         field.clear();
@@ -278,6 +276,9 @@ Please check your network connection and try again.`;
         this.resizeTextarea();
       }
 
+      // `focus` is needed to remain cursor in the textarea.
+      this.$nextTick(() => field.focus());
+
       this.autosave.reset();
     },
     setNoteType(type) {
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 397b8f51ce1..5556d37d43b 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -180,7 +180,7 @@ export default {
     },
   },
   mounted() {
-    this.$refs.textarea.focus();
+    this.$refs.markdownField.focus();
   },
   methods: {
     ...mapActions(['toggleResolveNote']),
diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue
index cea51c446f7..683ed56261b 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/field.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue
@@ -105,6 +105,7 @@ export default {
   },
   data() {
     return {
+      isFocused: false,
       mode: 'markdown',
       currentValue: this.value,
       renderedLoading: false,
@@ -167,6 +168,9 @@ export default {
     },
   },
   watch: {
+    mode() {
+      this.$nextTick(this.focus);
+    },
     needsMarkdownRender() {
       if (this.needsMarkdownRender) {
         this.$nextTick(this.renderMarkdown);
@@ -207,6 +211,10 @@ export default {
       this.mode = newMode;
     },
 
+    setFocused(newFocused) {
+      this.isFocused = newFocused;
+    },
+
     setCurrentValue(newValue, { emitEvent = true } = {}) {
       if (newValue === this.currentValue) return;
 
@@ -228,6 +236,18 @@ export default {
       }
     },
 
+    blur() {
+      if (this.modeIsMarkdown) {
+        this.$refs.textarea.blur();
+      }
+    },
+
+    focus() {
+      if (this.modeIsMarkdown) {
+        this.$refs.textarea.focus();
+      }
+    },
+
     renderMarkdown() {
       if (!this.renderedOutdated || this.renderedLoading) return;
 
@@ -284,8 +304,11 @@ export default {
 
 <template>
   <div
-    ref="gl-form"
-    :class="{ 'prepend-top-default append-bottom-default': addSpacingClasses }"
+    ref="glForm"
+    :class="{
+      'prepend-top-default append-bottom-default': addSpacingClasses,
+      'is-focused': isFocused,
+    }"
     class="js-vue-markdown-field md-area position-relative"
   >
     <markdown-header
@@ -313,6 +336,8 @@ export default {
           @keydown.ctrl.enter="triggerSave"
           @keydown.esc="triggerCancel"
           @input="onTextareaInput"
+          @focus="setFocused(true)"
+          @blur="setFocused(false)"
         >
         </textarea>