title: Tabindex not working after focus on childcomponent
body: <p>I've made a typeahead that uses hostlistner to listen after focus and then activate focus on the input:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input #inputField type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="emitResult($event)"/&gt;
  &lt;ng-template #rt let-r="result" let-t="term"&gt;
    {{r[displayKey]}}
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>I listen after focus and set focus in the following way:</p>
  
  <pre class="lang-js prettyprint-override"><code>@ViewChild('inputField') inputField: ElementRef;
    @HostListener('focus') focusIn() {
      if (!this.focused) {
        setTimeout(() =&gt; {
          this.focused = true;
          this.inputField.nativeElement.focus();
        });
      }
    }
  </code></pre>
  
  <p>And the problem Im having is that it messes up the tabindex in the parent view.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="col-12"&gt;
          &lt;label for="sw"&gt;SW&lt;/label&gt;
          &lt;shrd-typeahead id="sw" autoFocus [data]="swList" [filterKey]="'name'" [displayKey]="'name'" (result)=selectedSw($event)
            tabindex="1"&gt;&lt;/shrd-typeahead&gt;
        &lt;/div&gt;
  
        &lt;div class="col-12"&gt;
          &lt;label for="amount"&gt;Amount&lt;/label&gt;
          &lt;input type="text" class="form-control" id="amount" [(ngModel)]="amount" tabindex="2"&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>br</p>