V3.1.1 SearchBar setFocus() not setting focus

[ionitron-bot]

Original issue by @HairyCream on 2017-04-30T21:30:03Z

Ionic version: (check one with "x")
[X] 3.1.1

I'm submitting a ... (check one with "x")
[X] bug report

Current behavior:
Using setFocus() on SearchBar property inside IonViewDidEnter does not set the focus.

Expected behavior:
The focus should be in the searchbar entry area after the page is entered

Steps to reproduce:

1. ionic start setFocus blank
2. cd setFocus
3. update home.html and home.ts as below
4. ionic serve

Related code:
home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-searchbar #si (ionInput)="onInput($event)"></ion-searchbar>
</ion-content>

home.ts

import { Component, ViewChild } from '@angular/core';
import { Searchbar } from 'ionic-angular';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('si') searchInput: Searchbar;
  constructor() {
  }

  ionViewDidEnter() {
    console.log("setFocus()", this.searchInput);
    this.searchInput.setFocus();
  }

  onInput(ev: any) {
    console.log(ev.target.value);
  }
}

Other information:
I've only tried this in a browser (Chrome) using ionic serve

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

D:\dev\testSetFocus>ionic info
global packages:
    @ionic/cli-utils : 1.0.0-rc.0
    Cordova CLI      : 6.5.0
    Ionic CLI        : 3.0.0-rc.0
local packages:
    @ionic/app-scripts              : 1.3.6
    @ionic/cli-plugin-cordova       : 1.0.0-rc.0
    @ionic/cli-plugin-ionic-angular : 1.0.0-rc.0
    Ionic Framework                 : ionic-angular 3.1.1
System:
    Node       : v6.10.2
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

[tvb]

Ionic:

   ionic (Ionic CLI)             : 4.10.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.13.0
   @angular-devkit/schematics    : 7.3.0
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-webview 2.3.3, (and 6 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v10.9.0 (/usr/local/Cellar/node/10.9.0/bin/node)
   npm        : 6.7.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.1 Build version 10B61

events.page.ts

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import { LoadingController } from '@ionic/angular';
import { ViewChild } from '@angular/core';
import { Searchbar } from '@ionic/angular';

@Component({
  selector: 'app-user',
  templateUrl: './events.page.html',
  styleUrls: ['./events.page.scss']
})

export class EventsPage implements OnInit {
  @ViewChild('.searchbar-input') searchbar:Searchbar;
...

results in:

./src/app/events/events.page.ts 144:83-92
"export 'Searchbar' was not found in '@ionic/angular'

[liuqixing]

This issue was resolved perfectly by this:
https://www.grzegorowski.com/ionic-3-framework-setfocus-of-an-input/