ionic-framework: V3.1.1 SearchBar setFocus() not setting focus

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:

ionic start setFocus blank
cd setFocus
update home.html and home.ts as below
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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 6
Comments: 27 (8 by maintainers)

Most upvoted comments

Any updates on this - is there any hope of a fix or should the issue be closed with a documentation update? I have no problem with the limitation suggested by @manucorporat above but it does not seem to work: I experience the problem if I invoke setFocus() from inside a stack originating from a tap on an item in the auto search results (using wkwebview). Can anybody confirm they have observed this working or was it just an assumption that it would work?

I have applied the suggested patch to no avail. I have tried the setTimeout suggestion, also to no avail (I don’t understand how the latter suggestion could work as it contradicts the requirement that the event must originate from a touch/mouse/keyboard event?).

Any status update on the issue as well as new ideas or suggestions are very welcome!

ggravand on Aug 24, 2017

I’m now on Ionic 3.4.0, and it still doesn’t work in browser, Android or iOS. If this will never work, … “known limitation”, then shouldn’t the Ionic documentation ( API>SearchBar>setFocus() ) be updated to reflect the current situation?

HairyCream on Jun 16, 2017

Still having this issue? Why is it closed without any comments?

simonweber96 on Jun 14, 2017

I’d like to add a suggestion to everyone that is going through this issue either now or will stumble on it in the future. I’d suggest logging your searchbar viewchild before setting focus on it. If it comes back as undefined, that probably means your setFocus() is being called before ionic searchbar has initialized. This could happen because of *ngIf because the element is not initialized until it passes the conditional flag and could cause delay in between creation and using one of its function. In that case, use a small timeout (150ms) and then log it again. If you do see it, then set the focus within that timeout.

anjildhamala on Jan 2, 2018

Hey I’m using as a workaround ngOnInit() { setTimeout(() => { this.username.setFocus(); }, 150); }

ekhmoi on May 2, 2017

after reading too many threads, i have tried below code and it is working fine for iOS.

ionViewDidEnter(){
    let self = this;
    setTimeout(() => {
      self.ngZone.run(()=>{
        self.searchbar.setFocus();
      })
    }, 500)
  }

For iOS, if someone want to show cancel button always then you can add below css,

.searchbar-ios-cancel {
      display: block;
      padding-left:8px !important;
    }

So basically , to setFocus work on iOS , you need to setFocus in viewDidEnter instead of iosViewWillEnter/ionViewDidLoad.

keyboard.show will not work at all in iOS, Please check below

show()
Platforms:ANDROID BLACKBERRY 10 WINDOWS 

Force keyboard to be shown.

Ref - https://ionicframework.com/docs/native/keyboard/

SaurabhPrajapati on Aug 3, 2018

I have the same problem on Chrome on Windows desktop.

michaelkariv on Mar 3, 2018

@keithdmoore … The delayed timeout doesn’t make much of a difference. Just make sure device/plugin is ready and view is loaded.

chukwu on Dec 23, 2017

First, if @manucorporat is correct, and this is a known limitation, then the issue should be re-queued for a documentation update. … or am I missing something?

But, by “browser” I mean the browser session initiated by an ionic serve command. The easiest way to reproduce is to follow the “Steps to reproduce:” in the first post. I have tried this with both Chrome (59.0.3071.109) and Firefox (ionic serve -w firefox / 54.0 32-bit) under Win 10 Pro.

HairyCream on Jun 22, 2017