optimistex / ngx-select-ex

Angular based replacement for select boxes
https://optimistex.github.io/ngx-select-ex/
MIT License
111 stars 42 forks source link

Focus after select #185

Open enriqueavg opened 4 years ago

enriqueavg commented 4 years ago

Hi,

Many thanks for develop this component.

I want to use It for select products and then add items to form array. After users select an element we are cleaning items for new request to the api remote data.

I want to add "autofocus" property to input search. I try with this code but this doesn't work.

In html:

<ngx-select [items]="product_items" placeholder="Search..." optionValueField="name" optionTextField="name" [searchCallback]="searchCallback" (typed)="searchProductsTyped.next($event)" (selectionChanges)="addChargeItem($event)" #searchProductsInput>

component.ts: @ViewChild('searchProductsInput', { static: false }) searchProductsInput: ElementRef;

and then:

this.searchProductsInput.nativeElement.focus();

I get this error:

ERROR TypeError: Cannot read property 'focus' of undefined

Thanks for your help.

optimistex commented 4 years ago

@enriqueavg Hi. Try to do it after viewing init https://angular.io/guide/lifecycle-hooks#afterview

enriqueavg commented 4 years ago

Thanks for you quickly response =).

Pls, can you give more advices for do that?

enriqueavg commented 4 years ago

I try this but input focus still doesn't work.

@ViewChild(NgxSelectComponent) ngxSelectComponent: NgxSelectComponent;
ngAfterViewInit () {
    this.ngxSelectComponent.focusToInput();
    console.log('Hello!')
}