Автофокус работает только один раз

При нажатии на "Enter" автофокус работает только в первом случае, поэтому "list-formatter" (autocompleListFormatter) запускается только один раз.

**Demo**

Существует ли простое решение для фокусировки с автофокусом более одного раза?

dropdown.component.html

<form [formGroup]="myForm" class="">
  <div class="form-style">
    <input
      autofocus
      [list-formatter]="autocompleListFormatter"
      type="text"
      class="form-control"
      ngui-auto-complete
      formControlName="costCenter"
      [source]="dropdownData"
      value-property-name="id"
      display-property-name="name"
      [(ngModel)]="value"
    />
  </div>
</form>

dropdown.component.ts

export class DropdownComponent implements OnInit, AgEditorComponent {
  @Input() name: String;

  public dropdownData = ColumnData[0].cellEditorParams.values;
  public myForm: FormGroup;
  public selected;
  value: any;
  oldValue: any;
  params: any;
  public container;
  constructor(private builder: FormBuilder, private _sanitizer: DomSanitizer) {}

// ****DROPDOWN****** //
  autocompleListFormatter = (data: any) => {
    let html = '<span>${data.name}</span>';
    return this._sanitizer.bypassSecurityTrustHtml(html);
  };

  refresh(params: ICellEditorParams) {
    this.params.api.refreshCells();
    return true;
  }

  getValue(): any {
    if (this.value === '') {
      this.value = this.oldValue;
    }
    return this.value;
  }

  agInit(params: ICellEditorParams) {
    this.value = params.value;
    this.oldValue = this.value;
    this.value = '';
    return this.value;
  }

  ngOnInit() {
    this.myForm = this.builder.group({
      costCenter: ''
    });
  }
}

STACKBLITZ

Обновление: я прочитал, что полезно реализовать директиву автоматической фокусировки. Я добавил директиву в свой код, но не могу заставить ее работать правильно

Ответы

Ответ 1

это можно сделать без директивы, просто получите ссылку на элемент input и запустите метод focus

шаблон

<form [formGroup]="myForm" class="">
  <div class="form-style">
    <input
      defFocus
      [list-formatter]="autocompleListFormatter"
      type="text"
      class="form-control"
      ngui-auto-complete
      formControlName="costCenter"
      [source]="dropdownData"
      value-property-name="id"
      display-property-name="name"
      [(ngModel)]="value"
      #agInput
    />
  </div>
</form>

компонент

export class DropdownComponent implements OnInit, AgEditorComponent {

  @Input() name: String;
  @ViewChild('agInput', { static: true}) public elm: ElementRef;

  ....

  setFocus() {
    this.el.nativeElement.focus();
  }

   ngAfterViewInit() {
     setTimeout(() => {
        this.setFocus();
     }, 500);
   }
}

демо 🚀

проверьте мой ответ 👉 здесь, где я создаю пользовательскую директиву для решения проблемы фокуса.