Angular2 Управление фокусом и выбором программно

Question

Мне нужно установить фокус определенного поля ввода после инициализации компонента, и я бы хотел, чтобы внутренний текст был полностью выбран. Глядя на Интернет для некоторого намека, я закончил писать speficic директиву, таким образом:

@Directive({ 
selector: '[focusControl]'}) 
export class FocusDirective { 
@Input('focusControl') focusEvent: EventEmitter<boolean>; 

constructor(@Inject(ElementRef) private element: ElementRef, private renderer: Renderer) { 
} 

ngOnInit() { 
    this.focusEvent.subscribe(event => { 
     this.renderer.invokeElementMethod(this.element.nativeElement, 'focus', []); 
     if (this.element.nativeElement.tagName == "INPUT") { 
      this.renderer.invokeElementMethod(this.element.nativeElement, 'select', []); 
     }    
    }); 
}} 

В шаблоне, очевидно, я установить директиву на элементе:

<input type="text" class="form-control" tabindex="1" [focusControl]="userIdFocus" maxlength="32">  

Затем, после того, как вид компонента инициализируется в функции обратного вызова AfterViewInit, я пытаюсь установить фокус и выберите:

ngAfterViewInit() { 
    this.userIdFocus.emit(true); 
}     

проблема заключается в поле получает фокус, но текст НЕ выбрано. Если я попытаюсь установить фокус по щелчку на кнопке, то все это будет работать корректно.

Я мог бы исправить это?

Answer 1

Вы используете Chrome? Как найдено в: https://stackoverflow.com/a/19498477

В Chrome выбор с помощью .select() не вставлен - добавление небольшого таймаута решает эту проблему.

на основе кода, что-то, как это должно работать:

setTimeout(() => { 
    this.renderer.invokeElementMethod(this.element.nativeElement, 'select', []); 
}, 0); 

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

Надеюсь, что это поможет! Просто столкнулся с проблемой сам.