title: Showing soft keyboard in devices when focus() not working
body: <p>Angular 2 + Typescript web app: </p>
  
  <p>The problem is the following:</p>
  
  <p>I found out that, after focusing an element using a <code>@ViewChild</code> or getting the element by tag or id with <code>.focus()</code>, it wasn't exposing the soft keyboard in iOS and Android devices.</p>
  
  <p>I figured out that the problem was that either with <code>*ngIf</code> or <code>display: none</code> after the element is shown again, for some reason it doesn't triggers the soft keyboard in the devices.</p>
  
  <p>A workaround is setting an <code>[ngClass]</code> to set styles like: 
  <code>opacity: 0;</code> plus removing the margins and paddings. But this way it was scrolling when focusing and exposing the keyboard.
  So I had to just add a <code>position: absolute</code> + <code>bottom: 9999px</code> to avoid the scroll.</p>
  
  <p>I wonder if there is a different (less hacky) solution I could use for this</p>
  
  <p>Thanks!</p>
  
  <p>edit:</p>
  
  <p>the hidden element is it's parent's parent like this: </p>
  
  <p><code>&lt;mr-navbar [ngClass]="{'local-fixed-header': isHeaderFixed(), 'local-non-fixed-header': !isHeaderFixed()}"
                 *ngIf="canShowHeader()"&gt;&lt;/mr-navbar&gt;</code></p>
  
  <p>So the input is within a child of <code>mr-navbar</code> called <code>smb-component</code> which is: </p>
  
  <p><code>
   &lt;input id="searchInput" #searchInputMobile placeholder="{{ Home.SEARCH_HELP_TEXT_MOBILE | translate }}" [(ngModel)]="searchText"
                   (focus)="onSearchInputFocus($event)" (focusout)="onSearchInputFocusOut($event, Home.SEARCH_HELP_TEXT_MOBILE)"
                   (keyup)="loadSearchModalWithInput($event)"
                   class="search-input visible-xs" tabindex="{{ searchTabIndex }}"/&gt;
  </code></p>