I'm using a nb-autocomplete
component, and after selecting a value I need to keep focus on the element. Everything I've tried so far does not work:
Here's my HTML:
<input
type="text"
nbInput
placeholder="Destinations"
autocomplete="off"
(input)="onDestinationsChange(i)"
id="autocomplete-{{ i }}"
[nbAutocomplete]="destination"
/>
<nb-autocomplete
#destination
(selectedChange)="onDestinationSelectedChange($event, i)"
>
<nb-option
*ngFor="let autocompleteDestination of autocompleteDestinations$ | async"
[value]="autocompleteDestination"
>
{{ autocompleteDestination?.name }}
</nb-option>
</nb-autocomplete>
And here are my attempts within the onDestinationSelectedChange()
of the service:
const destinationElem = (document.getElementById(`autocomplete-${itineraryIndex}`) as HTMLInputElement);
destinationElem.focus();
result: nothing happens, even with chrome devtools closed*
My other attempt was using a NativeElement and calling focus()
on that:
@ViewChild('autocomplete-0', {static: false}) inputEl:ElementRef;
this.inputEl.nativeElement.focus()
But this returns native element undefined
Anyone know how to accomplish this?