[Ionic 5] Ion-input mask issue

Hi,

I’m reporting multiple issues I’m facing and the whole adventure to get a phone mask working on a mobile web app.

I had an ionic v3 which I migrated to v5 and since then I started experiencing issues with my web app.

In v3 I used to use this component:
I used to use this component which was working just fine. However because it was referring to some libs which paths had changed I forked it and adapted it without changing any logic.

With ionic serve this was working just fine but when building with ionic build --prod I noticed that on the mobile experience when I was typing the number and the position on the mask belonged to a predefined symbol (ie. parenthesis) it would eat up the character that was just typed in.

Due to that I decided to move away from that component and start using ngx-mask-ionic. which has a different problem but which works fine with ionic serve on Desktop. On mobile however it limits the input to less digits than informed (ie. if the mask is (000) 0000-0000 for instance, it will only let me type things like 0000, which is very strange and totally different than what I observe with ionic serve.

Anyway, what I wanted to accomplish is simply applying a mask to my input and showing the “tel” keyboard. All of this was working fine in ionic v3 but with the updates I had to do on ionic v5 it stopped working. I don’t know if this is an ionic or angular issue and why it happens only after a prod build.

Anyone has succeed applying masks in ionic v5? If so, how was it done?

Ionic:

Ionic CLI : 6.8.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.7
@angular-devkit/build-angular : 0.803.25
@angular-devkit/schematics : 8.3.25
@angular/cli : 8.3.25
@ionic/angular-toolkit : 2.1.2

Capacitor:

Capacitor CLI : 1.5.1
@capacitor/core : 1.5.1

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.16.1 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS Catalina

Thanks in advance,
Caio

I did a quick troubleshoot to understand why the component was behaving just fine in Chrome Desktop but not on the Chrome mobile.

Turns out that the component relies on “keyup” event to be called.

If I print the value of the ngModel variable associated the component (ion-input) inside that keyup event, on Chrome Desktop it has the value corresponding to the character typed whereas in Chrome Mobile the ngModel variable is empty. Example:

Consider an empty ion-input where I type in 1 on it.

keyup prints nothing on Chrome Mobile
keyup prints 1 on Chrome Desktop

If then I type another 1 following the previous one
keyup prints 1 on Chrome Mobile
keyup prints 11 on Chrome Desktop

I used Chrome Developer Tools and Port Forwarding to debug this on the same session on my Android device and on the browser which was mirroring my device meaning it was the same execution and build version/content.

I don’t have a clue why this is happening but I had to fix this by reading the event input values (concatenating characters typed in coming in the keyup event) instead of trusting the ngModel value.

Had a similar issue here, tried so many things but I have not found any solution.

Do you have any solution?

I am thinking to build my own library for this which support ionic 5.

It seems that this is an angular issue.

ngModel updates at a different time depending whether you’re on mobile or desktop (checked this with Chrome) - ie. after or before keyup. What I had to do is break the multiple parts of my mask into multiple ion-inputs with the right types. For instance, before I had a single field with the mask applied, the mask was something like 00 0000-0000, I made that 3 input fields, one with maxlength=2, another two with 4 each. All of them using type=tel and put one after the other with a dash separating the last two fields. It is a workaround for what I wanted but it is working fine.

1 Like

I see,

for now, my workaround is to use the ngx-mask library and added the “ion-input” styled <input> tag . It is a really dirty work but works on PWA.