Hi
I have an Ionic app using ionic v3, In the login page when i input wrong username and password the application div or input looses focus. its like the keyboard hide and leaves the keyboard space.I tried following the link setting-focus-to-an-input-in-ionic but didnt work. see code my below:
class LoginPage {
isEnabled: boolean = false;
public usercreds: Credentials = {
username: '',
password: '',
};
@ViewChild('username') inputUsername: any;
@ViewChild('password') inputPassword: any;
constructor(
public navCtrl: NavController,
public firebaseAnalytics: FirebaseAnalytics,
public alertCtrl: AlertController,
public loadingCtrl: LoadingController,
private auth: AuthService,
private navParams: NavParams,
platform: Platform,
) {
this.firebaseAnalytics
.logEvent('page_view', { page: 'Login' })
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
if (this.navParams.get('Logout')) {
this.auth
.Logout()
.then(() => {
this.navCtrl.setRoot(LandingPage);
})
.catch();
} else {
this.auth
.isLoggedIn()
.then(isLoggedIn => {
if (isLoggedIn) {
this.navCtrl.setRoot(HomePage);
}
})
.catch();
}
const page: this = this;
platform.registerBackButtonAction(() => {
page.goToLanding();
});
}
ionViewLoaded(): void {
setTimeout(() => {
this.inputUsername.setFocus();
this.inputPassword.setFocus();
}, 150);
}
public async login(user: Credentials): Promise<void> {
this.response = '';
this.inputUsername.setFocus();
this.inputPassword.setFocus();
const loadingCtrl: Loading = this.loadingCtrl.create({
content: 'logging in, please wait...',
});
try {
this.isEnabled = true;
loadingCtrl.present();
await this.auth.Login(user.username, user.password);
loadingCtrl.dismiss();
this.isEnabled = false;
this.navCtrl.setRoot(ImpactPage);
} catch (e) {
let message: string = 'Login attempt failed, please try again later.';
if (e && e.error_description) {
message = e.error_description;
}
this.alertCtrl
.create({
title: 'Login Failed',
message: message,
buttons: [
{
text: 'Dismiss',
handler: () => {
window.scrollTo(0, 0);
window.document.body.scrollTop = 0;
},
},
],
enableBackdropDismiss: true,
})
.present();
this.isEnabled = false;
loadingCtrl.dismiss();
}
}
}
I also added <preference name="KeyboardDisplayRequiresUserAction" value="false" />
in the config.xml file still doesn’t work. Please assist. Thank you.