1 files changed, 17 insertions, 5 deletions
diff --git a/app/assets/javascripts/issue_show/components/app.vue b/app/assets/javascripts/issue_show/components/app.vue
index a9418dd0bb2..d07a87ce43f 100644
--- a/app/assets/javascripts/issue_show/components/app.vue
+++ b/app/assets/javascripts/issue_show/components/app.vue
@@ -41,10 +41,6 @@ export default {
       required: false,
       default: '',
     },
-    showForm: {
-      type: Boolean,
-      required: true,
-    },
   },
   data() {
     const store = new Store({
@@ -57,14 +53,26 @@ export default {
       store,
       state: store.state,
       formState: store.formState,
+      showForm: false,
     };
   },
+  computed: {
+    elementType() {
+      return this.showForm ? 'form' : 'div';
+    },
+  },
   components: {
     descriptionComponent,
     titleComponent,
     editActions,
   },
   methods: {
+    openForm() {
+      this.showForm = true;
+      this.store.formState = {
+        title: this.state.titleText,
+      };
+    },
     updateIssuable() {
       this.service.updateIssuable(this.formState)
         .then(() => {
@@ -117,17 +125,21 @@ export default {
 
     eventHub.$on('delete.issuable', this.deleteIssuable);
     eventHub.$on('update.issuable', this.updateIssuable);
+    eventHub.$on('open.form', this.openForm);
   },
   beforeDestroy() {
     eventHub.$off('delete.issuable', this.deleteIssuable);
     eventHub.$off('update.issuable', this.updateIssuable);
+    eventHub.$off('open.form', this.openForm);
   },
 };
 </script>
 
 <template>
-  <div>
+  <div :is="elementType">
     <title-component
+      :store="store"
+      :show-form="showForm"
       :issuable-ref="issuableRef"
       :title-html="state.titleHtml"
       :title-text="state.titleText" />