Cool, Im gonna look into that, hoping that will take the animation time into acount. thnx, will post what I find here for reference
Yup, thats what i just thought! whether the event is fired before, during or after the transition! let us know!!
cheers!
Did you manage to find the solution?
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
For people using WKWebView and having the focus issue, take a look at https://www.npmjs.com/package/cordova-plugin-wkwebview-inputfocusfix.
Thanks friend for your help its work to me
yes it didnât work for me. I also get this error cannot read property âfocusâ of null TypeError
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.
after that how do I move focus to next elemnt,sine the cursor is stuck there!
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
Content is not defined error
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.
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>
The best solution. Works great for me too! =) But in my case I used set.Blur() method for my own purposes.
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 . . . >
Does it work in mobile iOS safari?
Make sure to upload : cordova-plugin-ionic-webview
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?
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?
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)
}
}