setTimeout () не работает должным образом, как получить фокус в поле ввода?

Question

Я хочу сосредоточиться на вводе, когда всплывающее модальное окно загружается

HTML

<custom-input #name id="name" formControlName="name"
      ngDefaultControl  maxlength="3" minlength="2">
</custom-input>

popup-modal.component.ts

  @ViewChild('name', { static: true }) name: ElementRef;

parent.component. html

<popup-modal #childComponent" >
</popup-modal>

parent.component.ts

  openPopUp() {

this.popUpChild.popUp.nativeElement.open= true;
 setTimeout(() => {
   this.popUpchild.name.nativeElement.focus();
 }, 0);
}

Я пытался открыть модальное всплывающее окно от родителя и установить фокус при вводе имени, но иногда это так иногда не из-за setTimeout. Как добиться фокуса каждый раз в поле ввода имени, когда открывается модальное всплывающее окно?

Answer 1

Установите время ожидания на 100. Убедитесь, что z-порядок самый высокий. Фокус работает только на верхнем слое.

Также рендеринг DOM выполняется в конце каждого цикла обновления. Когда вы вводите небольшую задержку, это дает DOM время для рендеринга. Это означает, что весь вид готов к go. Есть и другие способы, но это проще всего.

Z-порядок выводит любой элемент на вершину. Очень важно использовать компоненты материала.

Answer 2

Проблема в том, что когда вы устанавливаете для переменной open значение true, элемент все равно не отображается в HTML. Для этого вам нужно принудительно Изменить обнаружение вручную, а также вам больше не нужно использовать setTimeout.

parent.component.ts

constructor(private changeDetectorRef: ChangeDetectorRef) {}

openPopUp() {
    this.popUpChild.popUp.nativeElement.open= true;
    this.changeDetectorRef.detectChanges();
    this.popUpchild.name.nativeElement.focus();
}