Extra blank after suggestions keyboard

Ionic Framework Ionic Angular
1

Hello my current issue:

I had an email field like this :

<ion-item class="form-group ion-no-padding auth-form" mode="ios">
      <ion-label position="stacked">Adresse email</ion-label>
      <ion-input class="custom-input ion-touched" type="text" name="mail" formControlName="mail" required pattern="[A-Za-z0-9._%+-]{3,}@[a-z-A-Z0-9]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" [class.ion-touched]="isSubmitting && pollForm.controls['mail'].errors?.required" [(ngModel)]="userPoll.mail"></ion-input>
    </ion-item>

When I used the suggestions from keyboard, by example my usual email, ‘tichris@domain.com’, on click my field contains "tichris@domain.com " with an extra blank after the email.

I found this topic : email - iOS TextField - autocomplete adds blank character - Stack Overflow that describes perfectly the same issue.

Do you know if I can fix it for all my inputs ?

I use Ionic 5 with angular and capacitor.

Thanks,

2

Don’t mix formControlName and ngModel. Choose one or the other. The place I would recommend removing the extra space will be different depending on which way you go. Incidentally, Angular already has an email validator, and unless you have a really explicit reason otherwise, I would definitely suggest using it instead of rolling a regexp.

3

Hi Rapropos, thanks for you answer
Ok I decide to use formControlName instead of ngModal (and the email validator) , what the way to remove the extra space in this case ?

4

One way would be to listen to valueChanges with something like:

this.mailControl.valueChanges
  .pipe(untilDestroyed(this))
  .subscribe(nv => this.mailControl.setValue(nv.trim(), {emitEvent: false}));

untilDestroyed comes from @ngneat/until-destroy and prevents leaking the subscription. The {emitEvent: false} bit prevents this from turning into an infinite loop.

5

It works like a charm, thanks rapropos !
the only workaround i had to use, was to use type=“text” instead of type=“email” because type email didn’t trigger valueChanges when I use space in my keyboard, my final code:

<ion-input class="custom-input ion-touched" name="mail" formControlName="mail" required type="text" [email]="true" [class.ion-touched]="isSubmitting && pollForm.controls['mail'].errors?.required"></ion-input>

this.pollForm.get('mail').valueChanges.subscribe(nv => { this.pollForm.get('mail').setValue(nv.trim(), {emitEvent: false}); });