TypeScript FormIO Custom Component doesnt Render & cant add Even Listeners

[weznellxrm]

I have created a custom component in FormIO. I have followed the tutorial on the Check Matrix component and I am having issues trying to:

1. get the type to render as a custom name "e.g. mycomp". It returns "unknown component: mycomp" in the builder. I reverted to using a type that is known by FormIO like "textfield" and it renders
2. Adding eventlisteners to my component is not triggering

How can I get the component to render and add my events to this component? What i am doing wrong?

InputComponent.ts

  Import { Components } from "formiojs";

   const Field = Components.components.field;


   export default class loqateAddressComponent extends (Field as any) {
   constructor(component, options, data) {
    super(component, options, data);
   
   }

   static schema(...extend:any[]) {
   
     return Field.schema({
         type: 'textfield', //want this to be customname but it wont render
         label: 'Xrm Address',
         key: 'loqateaddress',
         ...extend});
   }

    static get builderInfo() {
      return {
       title: 'Loqate Address',
       group: 'basic',
       icon: 'home',
       documentation: '/userguide/#address',
       weight: 35,
       schema: loqateAddressComponent.schema(),
     };
   }

   renderInput(){
   return this.renderTemplate('input', {
     input: {
       type: 'input',
       ref: `${this.component.key}`,
       attr: {
         id: `${this.component.key}`,
         class: 'form-control',
         type: 'search',
       }
     }
   });
  }

  public render(children) {
   return super.render(this.renderTemplate('loqateaddress',{
     renderInputType: this.render.bind(this)
   }));
 }

 public attach(element: any) {
   const refs = {};
   refs[`${this.component.key}`] = "input";

   this.loadRefs(element, refs);
   console.log("attach rendered");

   this.addEventListener(element, 'change', ()=> { 
     console.log("address clicked");
   });
   

   return super.attach(element);
 }


 

}

Form.ejs (For my template)

<div>
    {% {{ctx.renderInputType}} %}
</div>

[stefanbobeica]

Hello!
Have you figured it out?
I try to do the same but I am facing the same issues...

[daneformio]

Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!