Phone mask duplicating numbers on android 5.0.1

[diogomiloco]

This only happens on android 5.0.1, I have another device with android 8 and it's working fine there.

The code:

html file:

    <ion-item>
      <ion-label>Telefone</ion-label>
      <ion-input 
        type="text" 
        formControlName="telefone"
        [brmasker]="{form: cliente.get('telefone'), phone: true}"
        ></ion-input>
    </ion-item>

.page file:

  ngOnInit() {
    this.cliente = this.fb.group({
      id: '',
      nome: ['', [Validators.required, Validators.minLength(4)]],
      email: ['', [Validators.required, Validators.email]],
      telefone: ['', [Validators.minLength(14)]],
    });
  }

.module file:

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    BrMaskerModule,
    RouterModule.forChild(routes)
  ],
  declarations: [CadastroRapidoPage],
  exports: [
    FormsModule,
    ReactiveFormsModule,
  ]
})

More info: Ionic: 4.5.0 Cordova: 8.1.2

By the way, awesome project, it's helping a lot with formatting.

[amarkes]

quem é esse cara?

this.fb.group

[diogomiloco]

É um FormBuilder, uso ele pra criar a validation dos campos e garantir que o usuario inseriu eles e que o form está valid)

export class CadastroRapidoPage implements OnInit {
  public nome: string;
  public email: string;
  public telefone: string;

  public cliente: FormGroup;

  constructor(
    private fb: FormBuilder,
    private clienteSaver: ClienteService,
    public alertCtrl: AlertController
    ) {
  }

  ngOnInit() {
    this.cliente = this.fb.group({
      id: '',
      nome: ['', [Validators.required, Validators.minLength(4)]],
      email: ['', [Validators.required, Validators.email]],
      telefone: ['', [Validators.minLength(14)]],
    });
  }
...
}

[amarkes]

tenta usar formGroup

import { FormGroup, FormControl, Validators } from '@angular/forms';

this.cliente = new FormGroup({
      id: new FormControl(''),
      nome: new FormControl('', [Validators.required, Validators.minLength(4)]),
      email: new FormControl('', [Validators.required, Validators.email]),
      telefone: new FormControl('', [Validators.minLength(14)]),
    });

[diogomiloco]

Mesmo comportamento. Testei o mesmo com a flag --prod e acontece a mesma coisa, funciona no android 8, funciona no browser, mas dá esse problema no andorid 5. Tentei com "cordova run android" e "cordova build android" instalando a APK, mesma coisa.

Tem mais alguma info que posso te fornecer pra ajudar?

[diogomiloco]

Descobri que se nesse caso eu mudar o input pra "tel", volta a funcionar no android 4. Eu acho que é um problema de polyfill. Pro meu use-case isso basta. Se eu tiver esse problema com outros tipos de inputs te aviso e tento propor uma solução. Obrigado!