Strange behaviour Dropdown list added to the Editor Window

onPopupOpen(args: PopupOpenEventArgs): void {
  if (args.type === 'Editor') {
    // Create required custom elements in initial time
    if (!args.element.querySelector('.custom-field-row')) {
      let row: HTMLElement = createElement('div', { className: 'custom-field-row' });
      let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form');
      formElement.firstChild.insertBefore(row, args.element.querySelector('.e-description-row'));
      let container: HTMLElement = createElement('div', { className: 'custom-field-container' });
      let inputEle: HTMLInputElement = createElement('input', {
        className: 'e-field', attrs: { name: 'StatusCode' }
      }) as HTMLInputElement;
      container.appendChild(inputEle);
      row.appendChild(container);
      let dropDownList: DropDownList = new DropDownList({
        dataSource: this.dropDownStatusList,
        fields: { text: 'StatusName', value: 'StatusCode' },
        value: (args.data as { [key: string]: Object }).EventType as string,
        floatLabelType: 'Always', placeholder: 'Status'
      });
      dropDownList.appendTo(inputEle);
      inputEle.setAttribute('name', 'StatusCode');
    }
  }
}

public eventObject: EventSettingsModel = {
  dataSource: this.planningEventsList,
  enableTooltip: true,
  tooltipTemplate: this.tooltemp,
  allowAdding: true,
  allowEditing: true,
  allowDeleting: true,
  fields: {
    subject: { title: 'Onderwerp', name: 'Subject', validation: { required: true } },
    startTime: { title: 'Van', name: 'StartTime', validation: { required: true } },
    endTime: { title: 't/m', name: 'EndTime', validation: { required: true } },
    description: { title: 'Toelichting', name: 'Description', validation: { required: true } },
    isAllDay: { title: 'Hele dag', name: 'IsAllDay'},
    location: { title: 'Locatie', name: 'Location', validation: { required: true }},
  }
};