Fix rendering issue with custom traits. Closes #3735

src/trait_manager/index.js

@@ -10,7 +10,6 @@ import TraitButtonView from './view/TraitButtonView';
 
 export default () => {
   let c = {};
-  let types = {};
   let TraitsViewer;
   const typesDef = {
     text: TraitView,
@@ -24,8 +23,6 @@ export default () => {
   return {
     TraitsView,
 
-    types,
-
     /**
      * Name of the module
      * @type {String}
@@ -50,7 +47,7 @@ export default () => {
       c = config;
       defaults(c, defaultOpts);
       const ppfx = c.pStylePrefix;
-      types = { ...typesDef };
+      this.types = { ...typesDef };
       ppfx && (c.stylePrefix = `${ppfx}${c.stylePrefix}`);
       return this;
     },
@@ -79,8 +76,8 @@ export default () => {
      * @param {Object} methods Object representing the trait
      */
     addType(name, trait) {
-      const baseView = types.text;
+      const baseView = this.getType('text');
-      types[name] = baseView.extend(trait);
+      this.types[name] = baseView.extend(trait);
     },
 
     /**
@@ -89,23 +86,33 @@ export default () => {
      * @return {Object}
      */
     getType(name) {
-      return types[name];
+      return this.getTypes()[name];
+    },
+
+    /**
+     * Get all trait types
+     * @returns {Object}
+     */
+    getTypes() {
+      return this.types;
     },
 
     render() {
-      TraitsViewer && TraitsViewer.remove();
+      const el = TraitsViewer && TraitsViewer.el;
       TraitsViewer = new TraitsView({
+        el,
         collection: [],
         editor: c.em,
         config: c
       });
-      TraitsViewer.itemsView = types;
+      TraitsViewer.itemsView = this.getTypes();
-      return TraitsViewer.render().el;
+      TraitsViewer.updatedCollection();
+      return TraitsViewer.el;
     },
 
     destroy() {
       TraitsViewer && TraitsViewer.remove();
-      [c, types, TraitsViewer].forEach(i => (i = {}));
+      [c, TraitsViewer].forEach(i => (i = {}));
     }
   };
 };

src/trait_manager/view/TraitsView.js

@@ -8,14 +8,14 @@ export default DomainViews.extend({
 
   initialize(o = {}) {
     const config = o.config || {};
+    const pfx = config.stylePrefix || '';
+    const em = o.editor;
     this.config = config;
-    this.em = o.editor;
+    this.em = em;
-    this.pfx = config.stylePrefix || '';
+    this.pfx = pfx;
     this.ppfx = config.pStylePrefix || '';
-    this.className = this.pfx + 'traits';
+    this.className = `${pfx}traits`;
-    const toListen = 'component:toggled';
+    this.listenTo(em, 'component:toggled', this.updatedCollection);
-    this.listenTo(this.em, toListen, this.updatedCollection);
-    this.updatedCollection();
   },
 
   /**
@@ -23,9 +23,9 @@ export default DomainViews.extend({
    * @private
    */
   updatedCollection() {
-    const ppfx = this.ppfx;
+    const { ppfx, className, em } = this;
-    const comp = this.em.getSelected();
+    const comp = em.getSelected();
-    this.el.className = `${this.className} ${ppfx}one-bg ${ppfx}two-color`;
+    this.el.className = `${className} ${ppfx}one-bg ${ppfx}two-color`;
     this.collection = comp ? comp.get('traits') : [];
     this.render();
   }