From e450cb98855d16ad819f1214350825a50e45e910 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 14 Dec 2017 15:18:23 +0100
Subject: [PATCH] Update the Component view once the tagName is updated. Fixes
 #639

---
 src/dom_components/model/Component.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 4be5f51c9..67898445e 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -161,6 +161,7 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     this.set('attributes', this.get('attributes') || {});
     this.listenTo(this, 'change:script', this.scriptUpdated);
     this.listenTo(this, 'change:traits', this.traitsUpdated);
+    this.listenTo(this, 'change:tagName', this.tagUpdated);
     this.loadTraits();
     this.initClasses();
     this.initComponents();
@@ -182,6 +183,17 @@ module.exports = Backbone.Model.extend(Styleable).extend({
   },
 
 
+  /**
+   * Once the tag is updated I have to remove the node and replace it
+   */
+  tagUpdated() {
+    const coll = this.collection;
+    const at = coll.indexOf(this);
+    coll.remove(this);
+    coll.add(this, { at });
+  },
+
+
   /**
    * Update attributes of the model
    * @param {Object} attrs Key value attributes