Tabindex not working after focus on childcomponent - html

Question

I've made a typeahead that uses hostlistner to listen after focus and then activate focus on the input:
<input #inputField type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="emitResult($event)"/>
<ng-template #rt let-r="result" let-t="term">
{{r[displayKey]}}
</ng-template>
I listen after focus and set focus in the following way:
#ViewChild('inputField') inputField: ElementRef;
#HostListener('focus') focusIn() {
if (!this.focused) {
setTimeout(() => {
this.focused = true;
this.inputField.nativeElement.focus();
});
}
}
And the problem Im having is that it messes up the tabindex in the parent view.
<div class="col-12">
<label for="sw">SW</label>
<shrd-typeahead id="sw" autoFocus [data]="swList" [filterKey]="'name'" [displayKey]="'name'" (result)=selectedSw($event)
tabindex="1"></shrd-typeahead>
</div>
<div class="col-12">
<label for="amount">Amount</label>
<input type="text" class="form-control" id="amount" [(ngModel)]="amount" tabindex="2">
</div>
So I can set the focus without problem. But when I press "tab" after I've picked SW in the list I go to navigation in chrome instead of going to the next inputfield. :S
Is there a neat solution for this problem?
br