3 files changed, 20 insertions, 16 deletions

diff --git a/app/assets/javascripts/issues/show/components/fields/description.vue b/app/assets/javascripts/issues/show/components/fields/description.vue
index d5ac7b28afc..0bb5e7cb2ee 100644
--- a/app/assets/javascripts/issues/show/components/fields/description.vue
+++ b/app/assets/javascripts/issues/show/components/fields/description.vue
@@ -1,5 +1,6 @@
 <script>
 import markdownField from '~/vue_shared/components/markdown/field.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
 import updateMixin from '../../mixins/update';
 
 export default {
@@ -8,8 +9,8 @@ export default {
   },
   mixins: [updateMixin],
   props: {
-    formState: {
-      type: Object,
+    value: {
+      type: String,
       required: true,
     },
     markdownPreviewPath: {
@@ -31,6 +32,11 @@ export default {
       default: true,
     },
   },
+  computed: {
+    quickActionsDocsPath() {
+      return helpPagePath('user/project/quick_actions');
+    },
+  },
   mounted() {
     this.$refs.textarea.focus();
   },
@@ -43,26 +49,26 @@ export default {
     <markdown-field
       :markdown-preview-path="markdownPreviewPath"
       :markdown-docs-path="markdownDocsPath"
+      :quick-actions-docs-path="quickActionsDocsPath"
       :can-attach-file="canAttachFile"
       :enable-autocomplete="enableAutocomplete"
-      :textarea-value="formState.description"
+      :textarea-value="value"
     >
       <template #textarea>
-        <!-- eslint-disable vue/no-mutating-props -->
         <textarea
           id="issue-description"
           ref="textarea"
-          v-model="formState.description"
+          :value="value"
           class="note-textarea js-gfm-input js-autosize markdown-area qa-description-textarea"
           dir="auto"
           data-supports-quick-actions="true"
           :aria-label="__('Description')"
           :placeholder="__('Write a comment or drag your files here…')"
+          @input="$emit('input', $event.target.value)"
           @keydown.meta.enter="updateIssuable"
           @keydown.ctrl.enter="updateIssuable"
         >
         </textarea>
-        <!-- eslint-enable vue/no-mutating-props -->
       </template>
     </markdown-field>
   </div>
diff --git a/app/assets/javascripts/issues/show/components/fields/description_template.vue b/app/assets/javascripts/issues/show/components/fields/description_template.vue
index d528641dcb6..98f92c97f77 100644
--- a/app/assets/javascripts/issues/show/components/fields/description_template.vue
+++ b/app/assets/javascripts/issues/show/components/fields/description_template.vue
@@ -8,8 +8,8 @@ export default {
     GlIcon,
   },
   props: {
-    formState: {
-      type: Object,
+    value: {
+      type: String,
       required: true,
     },
     issuableTemplates: {
@@ -39,10 +39,9 @@ export default {
     // Create the editor for the template
     const editor = document.querySelector('.detail-page-description .note-textarea') || {};
     editor.setValue = (val) => {
-      // eslint-disable-next-line vue/no-mutating-props
-      this.formState.description = val;
+      this.$emit('input', val);
     };
-    editor.getValue = () => this.formState.description;
+    editor.getValue = () => this.value;
 
     this.issuableTemplate = new IssuableTemplateSelectors({
       $dropdowns: $(this.$refs.toggle),
diff --git a/app/assets/javascripts/issues/show/components/fields/title.vue b/app/assets/javascripts/issues/show/components/fields/title.vue
index a73926575d0..594d1a65700 100644
--- a/app/assets/javascripts/issues/show/components/fields/title.vue
+++ b/app/assets/javascripts/issues/show/components/fields/title.vue
@@ -4,8 +4,8 @@ import updateMixin from '../../mixins/update';
 export default {
   mixins: [updateMixin],
   props: {
-    formState: {
-      type: Object,
+    value: {
+      type: String,
       required: true,
     },
   },
@@ -15,19 +15,18 @@ export default {
 <template>
   <fieldset>
     <label class="sr-only" for="issuable-title">{{ __('Title') }}</label>
-    <!-- eslint-disable vue/no-mutating-props -->
     <input
       id="issuable-title"
       ref="input"
-      v-model="formState.title"
+      :value="value"
       class="form-control qa-title-input gl-border-gray-200"
       dir="auto"
       type="text"
       :placeholder="__('Title')"
       :aria-label="__('Title')"
+      @input="$emit('input', $event.target.value)"
       @keydown.meta.enter="updateIssuable"
       @keydown.ctrl.enter="updateIssuable"
     />
-    <!-- eslint-enable vue/no-mutating-props -->
   </fieldset>
 </template>