Setting Focus to an Input in Ionic


#22

Cool, Im gonna look into that, hoping that will take the animation time into acount. thnx, will post what I find here for reference


#23

Yup, thats what i just thought! whether the event is fired before, during or after the transition! let us know!!
cheers!


#24

Did you manage to find the solution?


#25

hi, I am using ionic 3… I tried both solutions but it didn’t work, any advice ! thanx … the element ref method shows error cannot read property 'focus' of null TypeError


#26

For people using WKWebView and having the focus issue, take a look at https://www.npmjs.com/package/cordova-plugin-wkwebview-inputfocusfix.


#27

Thanks friend for your help its work to me


#28

yes it didn’t work for me. I also get this error cannot read property ‘focus’ of null TypeError


#29

There is NavController.isTransitioning(), not really a callback, but can be checked and used to delay actions until a transition is complete. In my experience though (Ionic 3.6.1), the setTimeout is required for setting input focus, but can use a 0 millisecond delay (which is the default if omitted). As I understand it, this is needed to queue an operation and trigger Angular change detection. I put it inside an ionViewDidEnter hook. There are also some Angular Lifecycle Hooks available, which might be more appropriate in certain cases.


#30

after that how do I move focus to next elemnt,sine the cursor is stuck there!


#31

I found this possible solution:

.html

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>Name</ion-label>
      <ion-input #inputRef type="text"></ion-input>
    </ion-item>
    <button ion-button (click)="focusMyInput(inputRef)">Focus</button>
  </ion-list>
</ion-content>

.ts

import {Content} from 'ionic-angular';

@ViewChild(Content) content: Content;

  focusMyInput(inputRef) {

    let itemTop = inputRef._elementRef.nativeElement.getBoundingClientRect().top;
    let itemPositionY = this.content.getContentDimensions().scrollTop + itemTop -80;
   
    this.content.scrollTo(null, itemPositionY, 500, () => {
      inputRef.setFocus();
    });

  }

But you have to make sure you have enough space to scroll at bottom. Tested on iOS 11


#32

Content is not defined error


#33

Make sure to “import {Content} from ‘ionic-angular’;” at the top of your .ts file. And of course your content musst be placed between tags.

I’ve edited my post.


#34

In my case, for some reason, ionViewLoaded() was not getting triggered. Tried ionViewDidLoad() and set the timer to 200 and it worked.

150 proved too early for me. Complete Solution:

import { Component, ViewChild } from '@angular/core';//No need to import Input

export class HomePage {

  @ViewChild('inputToFocus') inputToFocus;
  constructor(public navCtrl: NavController) {}

  ionViewDidLoad()
  {
    setTimeout(() => {
      this.inputToFocus.setFocus();
    },200)
  }  
}

And on the input tag:

<ion-input type="text" #inputToFocus></ion-input>


#35

The best solution. Works great for me too! =) But in my case I used set.Blur() method for my own purposes.


#36

I found a solution as a Directive

import { Directive, Renderer, ElementRef} from '@angular/core';
 
@Directive({ 
    selector: '[focuser]' // Attribute selector
})
export class Focuser {

    constructor(private renderer:Renderer,
                private elementRef:ElementRef) {
    }

    ngAfterViewInit() { 
        // we need to delay our call in order to work with ionic ...
        setTimeout(() => {
            const element = this.elementRef.nativeElement.querySelector('input');
            this.renderer.invokeElementMethod(element, 'focus', []);
        }, 1000);
    }   
}

add to app.module

import { Focuser } from "../directives/focuser/focuser";

@NgModule({
  declarations: [ ... 
                         Focuser  ]

use the directive.

<ion-input focuser . . . >


#37

Does it work in mobile iOS safari?


#38

Make sure to upload : cordova-plugin-ionic-webview


#39

Hey Blaydator,
I am having the same issue here and couldn’t make input field focus on iPhone (Keyboard doesn’t appear too). Do you have a solution on this?


#40

Mine is a little different.
On ios 10,
Using the old webkit
preference name=“CordovaWebViewEngine” value=“CDVUIWebViewEngine”

Trying to do a wizard in a modal. After a couple of screens we have a form for the users address. What is strange on iphone 7 with ios 10 the zip code (last value in the from) is what gets focused.

How can I change that to get focus on the first input?


#41

I found that the solution provided by alchibaucha works, but I had to significantly increase the delay. So mine now works when it’s set to 600.

import { Component, ViewChild } from '@angular/core';//No need to import Input

export class HomePage {

  @ViewChild('inputToFocus') inputToFocus;
  constructor(public navCtrl: NavController) {}

  ionViewDidLoad()
  {
    setTimeout(() => {
      this.inputToFocus.setFocus();
    },600)
  }  
}