check if description changed prior to binding TaskLists and calling renderGFM

app/assets/javascripts/issue_show/issue_title_description.vue

@@ -30,8 +30,9 @@ export default {
     return {
       poll,
       timeoutId: null,
-      title: null,
-      description: null,
+      title: '<span></span>',
+      description: '<span></span>',
+      descriptionChange: false,
     };
   },
   methods: {
@@ -40,6 +41,9 @@ export default {
       this.triggerAnimation(body);
     },
     triggerAnimation(body) {
+      // always reset to false before checking the change
+      this.descriptionChange = false;
+
       const { title, description } = body;
 
       this.descriptionText = body.description_text;
@@ -57,7 +61,12 @@ export default {
 
       if (!noTitleChange) {
         elementsToVisualize.push(this.$el.querySelector('.title'));
-      } else if (!noDescriptionChange) {
+      }
+
+      if (!noDescriptionChange) {
+        // only change to true when we need to bind TaskLists the html of description
+        this.descriptionChange = true;
+
         elementsToVisualize.push(this.$el.querySelector('.wiki'));
       }
 
@@ -100,6 +109,8 @@ export default {
     });
   },
   updated() {
+    // if new html is injected (description changed) - bind TaskList and call renderGFM
+    if (this.descriptionChange) {
       const tl = new gl.TaskList({
         dataType: 'issue',
         fieldName: 'description',
@@ -109,6 +120,8 @@ export default {
       $(this.$refs['issue-content-container-gfm-entry']).renderGFM();
 
       return tl;
+    }
+    return null;
   },
 };
 </script>