Firebase and Ionic 2: Bug with keyboard

Ionic Framework ionic-v3
1

image
login_error_firebase.gif720×1280 146 KB

Hello Ionic!
This bug is driving me crazy!
If the keyboard is open connections are interrupted/not opened, and this error message pops up:
A network error (such as timeout, interrupted connection or unreachable host) has occurred.

I am testing this on a samsung galaxy S3 (4.3). Crosswalk and Whitelist are installed.

In config.xml everything is allowed:

  <access origin="*"/>
  <allow-navigation href="*"/>
  <allow-intent href="*"/>`

My login.html:

<ion-content padding>

    <ion-list>
      <ion-item>
        <ion-label floating>Email</ion-label>
        <ion-input type="email" [(ngModel)]="email" name="email" required></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>Contraseña</ion-label>
        <ion-input type="password" [(ngModel)]="password" name="password" required></ion-input>
      </ion-item>
      <ion-item>
        <button ion-button type="button" block (click)="loginUser()">Iniciar sesión</button>
      </ion-item>
    </ion-list>

</ion-content>

My login.ts:

import { Component, NgZone } from '@angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
import { AngularFire } from 'angularfire2';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})

export class LoginPage {
  email: any;
  password: any;
  loading: any;

constructor(public navCtrl: NavController,
            public navParams: NavParams,
            public af: AngularFire,
            public zone: NgZone,
            public loadingCtrl: LoadingController) {}

            loginUser(){
            this.presentLoadingDefault();
              this.af.auth.login({
              email: this.email,
              password: this.password
              }).then((response) => {
              this.loading.dismiss();
                this.zone.run(() => {
                    this.navCtrl.setRoot(TabsPage);
                });
              }).catch((error) => {
                  this.loading.dismiss();
                  alert(error);
              });
             }

             presentLoadingDefault() {
              this.loading = this.loadingCtrl.create({
                content: 'Procesando...'
              });
              this.loading.present();
            }
}

Can someone tell me what is going on?
Thanks you in advance!

2

I don’t know. But I wonder if it’s a two-way binding issue, that if the keyboard hasn’t closed there is still a waiting listener somewhere. I suggest you try it without the ngModels and see if the problem persists.

3

Thank you Aaron!

I will try without the ngModels and give you some reply!

4

“You must include credentials to use this auth method”

this.email and this.password are blank without the ngModels :confused:

5

The bug is definetely related with the keyboard…

Is there a way of disabling the submit, until the keyboard is hidden?
If the submit button is clicked, hide the keyboard then call the login funcion?

Thanks!

6

I mean create a Form and use the submit function of the form, instead of what you are doing right now. Let the Angular form submit feature help you. If you haven’t heard of this, there are several blog tutorials if you’d like to see code.

7

I fixed it using ionix native keyboard hiding it before log in.

ngModels are still used.

Should I link this post to https://github.com/driftyco/ionic-plugin-keyboard so they take a closer look at the keyboard interrupting connectivity?

Thanks for your help btw

8

Same error here and not run closing the keyboard :frowning: