The custom traits are only displayed the first time

[alessandrodcr]

Hi everyone,

i am stuck in this problem and i dont know how to get out of it. I created a custom trait that retrieves data through a call to an external API, this custom traits is used by several components, what happens is that only the first time I select the component the custom trait is rendered correctly, if I try to click again on the component this is no longer displayed, it seems as if it stays in the cache and no longer makes the call to the external api.

This is the result after the first click of the component in the editor

This is the result on subsequent clicks of the same component in the editor

This is the code of custom traits, on the first click of the component it manages to call the "getInputEl" function so as to create the list with the remote data

const tm = editor.TraitManager;

// Select trait that maps a class list to the select options.
// The default select option is set if the input has a class, and class list is modified when select value changes.
tm.addType('context_select', {
  events:{
    'change': 'onChange',  // trigger parent onChange method on input change
  },
  getInputEl: function() {
    if (!this.inputEl) {
      var self=this;
      var md = this.model;
      var opts = md.get('options') || {};
      //var opts = config.context.elements;
      var input= document.createElement('input');
      var target = this.target;
      var target_view_el = this.target.view.el;
      var lDataSource;
      if (opts.remoteData) {
        lDataSource = ej.DataManager({
            url: opts.url || '',
            adaptor: new customAFAdaptor()
          });
      } else {
        lDataSource=opts.data;
      }

      this.inputEl = input; //ll[0];

      setTimeout(() => {
        self.getContext();
        jQuery(input).ejDropDownTree({
              treeViewSettings: {
                  loadOnDemand: opts.loadOnDemand || false,
                  fields:  Object.assign({}, opts.fieldMapping, {dataSource: lDataSource})
              },width: jQuery(input).outerWidth(),
              change: function (args){
                  //do your changes

                  function recurseDataFind(dataArray, key) {
                    let found=null;
                    for (let i=0; i<dataArray.length; i++) {
                      if(dataArray[i][opts.fieldMapping.id]===key) {
                        return dataArray[i];
                      }
                      if(dataArray[i].child && dataArray[i].child.length>0) {
                          found=recurseDataFind(dataArray[i].child, key);
                          if(found)
                            return found;
                      }
                    }
                  } 

                  let lFieldName = md.get('name') || {};
                  if (lFieldName && lFieldName!=='') {
                    var lKey=null;
                    if (args.selectedItems && args.selectedItems.length>0)
                      lKey=args.selectedItems[0].id;

                    var localData = null;
                    if (lKey)  {
                      localData=recurseDataFind(this.treeView._newDataSource, lKey);
                      if (localData) {
                        var lField= Object.assign({}, localData);
                        target.set(lFieldName, lField || {});
                      }
                    }
                  }
              }});
      }, 0);
    }
    return this.inputEl;
  },
  getContext: function() {
    var target = this.target;
    console.log("getContext");
    console.log(target);
    console.log(target.parent());
    return "Test";
  },
  onValueChange: function () {

    var md = this.model;
    var target = md.target;
    target.set('content', "%" + md.get('value') + "%");
    this.target.em.trigger('change:selectedComponent');
  }
});

and this is the code of component

```
const domc = editor.DomComponents;
const defaultType = domc.getType('default');
const defaultModel = defaultType.model;
const defaultView = defaultType.view;

domc.addType('input-field', {
    model: defaultModel.extend({
        toHTML() {
                    return this.get('Field_Html');
                },
        // Extend default properties
        defaults: {
            ...defaultModel.prototype.defaults,
            // Can't drop other elements inside it
            droppable: false,
            editable: false,
            tagName: "div",
            style: { "display": "inline-block" },
            type: 'input-field',
            content: "Input Field",
            traits: [{
                type: 'context_select',
                label: 'Field',
                name: 'oField',
                options: {
                    pageId: config.pageId || 0,
                    context: Object.assign({}, config.context),
                    url: "/Framework/getElementList?contextId=" + (config.context.id || 0),
                    remoteData: true,
                    //data: config.context.elements,
                    loadOnDemand: true,
                    fieldMapping: { id: "Key", parentId: "parentKey", text: "Name", value: "Path", imageUrl:'Ico', hasChild: 'hasChilds'},
                }
            }, {
                type: 'text',
                label: 'Value',
                name: 'oInputFieldValue',
                options: {}
            }],

            //Custom Properties
            oField : {
                Id:'',
                Key:'',
                NameComplete:'',
                Path:'',
                InternalName:''
            },
            oField_Html: ''

        },
        init() {
          console.log('Local hook: model.init');
          //this.listenTo(this, 'change:testprop', this.handlePropChange);
          // Here we can listen global hooks with editor.on('...')
          console.log(this);
          //console.log(this.parent());
        },
        updated(property, value, prevValue) {
          console.log('Local hook: model.updated',
            'property', property, 'value', value, 'prevValue', prevValue);
          console.log(this);
          //console.log(this.parent());
        },
        removed() {
          console.log('Local hook: model.removed');
          console.log(this);
          //console.log(this.parent());
        },
        handlePropChange() {
          console.log('The value of testprop', this.get('testprop'));
          console.log(this);
          //console.log(this.parent());
        }
    }, {
        isComponent(el) {
            return false;
        },
    }),
    view: defaultView.extend({
        events:{
            click: function(){
                console.log("into click input");
                const lTrait = this.model.getTrait("oField")
                console.log(lTrait);                    
            }
        },
        init: function (...args) {

            console.log('Local hook: view.init');
            console.log(this);
            //console.log(this.model.parent());

            let model = this.model;

            this.listenTo(model, 'change:oField', this.updateElement);
            defaultView.prototype.init.apply(this, args);
        },
        onRender() {
          console.log('Local hook: view.onRender');
          console.log(this);
          //console.log(this.model.parent());
        },
        updateElement: function() {
            this.el.innerHTML = '';
            this.el.appendChild(this.getElement());

            this.model.set('oField_Html', this.getElementHtml());

            const oField = this.model.get('oField');
            const path=oField.Path || '';
            this.model.set('content', "%" + path + "%");

        },
        getElement: function() {
            const oField = this.model.get('oField');
            const path=oField.Path || '';
            var ele = document.createElement('span');
            ele.innerHTML = "%" + path + "%";
            return ele;
        },
        getElementHtml: function() {
            const oField = this.model.get('oField');
            const path=oField.Path || '';


            let split = this.el.className.split(' ').filter(w => !w.includes('gjs'));
            let classNames=split.join(' ');

            let lHTML='<!-- ko component: { name: "o-input-field", params: { fieldName:"'+path+'", currentRecord: currentRecord, classNames:"'+classNames+'" }} --><!-- /ko -->';
            return lHTML;
        },
        render() {
            defaultView.prototype.render.apply(this);
            this.updateElement();
            return this;
        }
    })
});

any suggestions are welcome, thank you all!

[artf]

Please refer to the new API to define custom traits https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type