title: Input losing focus after first entered symbol
body: <p>I have authorization component where users use their phone numbers as login. And problem that after entering one symbol (doesn't matter letter or number) <code>input</code> loses focus and user needs to click it again to enter further.<br>
  <code>UPD:</code> Forgot to mention that there are 3 inputs. At the beginning there will be first input, when its empty. And after typing first number it will be replaced by second or third input depending which country user is. For certain country it will be replaced by input with +7 prefix, for another one with +9
  <br>
  html:</p>
  
  <pre><code>&lt;input [(ngModel)]="phone"
               *ngIf="isPhoneEmpty()"
               class="phone-input m-b-50"
               id="phone-input"
               type="text"
               name="phone"
               minlength=18
               placeholder="Phone number"
               required&gt;
  
      &lt;input [(ngModel)]="phone"
               *ngIf="checkCountry() &amp;&amp; !isPhoneEmpty()"
               class="phone-input m-b-50"
             id="phone-input"
               type="text"
               name="phone"
               minlength=18
               placeholder="Phone number"
               prefix="+7"
               mask=" (000) 000-00-00"
             autofocus
               required&gt;
  
        &lt;input [(ngModel)]="phone"
               *ngIf="!checkCountry() &amp;&amp; !isPhoneEmpty()"
               class="phone-input m-b-50"
               id="phone-input"
               type="text"
               name="phone"
               placeholder="PhoneNumber"
               prefix="+996"
               mask=" (000) 000-000"
               autofocus
               required&gt;
  </code></pre>
  
  <p>component: </p>
  
  <pre><code>import { HostListener} from '@angular/core';
  phone: string;
  
  checkCountry() {
      return this.currentCountry.name === this.countryList[0].name;
    }
  isPhoneEmpty() {
      return this.phone === '';
    }
  
  @HostListener('document:keypress', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {
  
      const numbers = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
  
      if (numbers.indexOf(event.key) !== -1) {
       this._documentRef.getElementById('phone-input').focus();
      }
    }
  </code></pre>