Select2 autoform creates an infinite loop and it's not reactive

help
1

I have one form that includes two more forms and I need that when the second form is updated to show that information in the first Form this way:

  1. main form:
{{#autoForm collection=company doc=company id='mainForm' type=formType}}
 {{> uploadLogoForm }}
 {{> afQuickField
   name='company.logoUrl'
   class='fu-select-tag--background-image'
   label='Select a logo'
   type='select'
   options=logoOptions
   template='plain'}}
{{/autoform}}
  1. second form:
<template name="uploadLogoForm">
  {{#autoForm collection=collection id="newLogoForm" type="normal" class="fu-form-upload"}}
    {{> afQuickField
     name="_id"
     accept=".png,.gif,.svg"
     label="Upload a logo"
     type="slingshot"
     directive="logos"}}
  {{/autoForm}}
</template>`

So if I Upload a logo in the uploadLogoForm this logo should show/selected in the main form with this helper:

Template.mainForm.helpers({
 logoOptions() {
   const company = getCompany();
   const logoUrls = [];
   let currentLogoUrl;

   if (company) {
    currentLogoUrl = company.company.logoUrl;
   }

   const uploadedLogo = AutoForm.getFieldValue('_id', 'newLogoForm');
   if (uploadedLogo) {
    currentLogoUrl = getPath(uploadedLogo);
   }

   if (currentLogoUrl) {
    logoUrls.push(currentLogoUrl);
   }

   if (FlowRouter.subsReady('logos')) {
     Logo.find({}, {sort: {_id: 1}}).forEach(logo => {
       const logoUrl = getPath(logo._id);

       if (!_.include(logoUrls, logoUrl)) {
         logoUrls.push(logoUrl);
       }
     });
  }

  return logoUrls.map(logoUrl => ({
   label: logoUrl,
   value: logoUrl,
   selected: logoUrl === currentLogoUrl ? true : null
 }));
}});

This works nicely with if the type of the quickfield is ‘select’ But when I use ‘select2’ a lot of weird things happens like infinite loop in the helper and the select element is empty. I have to select the element or file manually in order to to fix it.