InputMask: on Android does not fire onChange until focus lost

[irv075]

There is no guarantee in receiving an immediate response in GitHub Issue Tracker, If you'd like to secure our response, you may consider PrimeReact PRO Support where support is provided within 4 business hours

I'm submitting a ... (check one with "x")

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Codesandbox Case (Bug Reports)
https://codesandbox.io/s/inputmask-not-updating-nz7s5k

Current behavior
On mobile only, InputMask does not fire the onChange event until the component loses focus

Expected behavior
onChange is fired with each keystroke

Minimal reproduction of the problem with instructions

1. Using an actual mobile browser (not emulated), open the standalone codesandbox link (https://nz7s5k.csb.app/)
2. Change the value in the "Time" box. Note that the label value does not update.
3. Click out of the InputMask and note that the label now changes

The bug seems to only be reproducable on a real mobile browser. It does not appear when using a desktop browser with a mobile device type emulated (e.g. via Chrome devtools). It also does not appear when using actual mobile Chrome but with "Request Desktop Site" enabled.

Please tell us about your environment:
Windows 11, VS Code

• React version:
  17.0.2

• PrimeReact version:
  7.2.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  Mobile Chrome 99

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript 4.5.5

[melloware]

So when you say Mobile Chrome 99 is that on iOS or Android?

[irv075]

Sorry, its Android. Not tested on iOS

[melloware]

OK because in INputMask.js I see code like this...

if (/android/i.test(DomHandler.getUserAgent())) {

And

let iPhone = /iphone/i.test(DomHandler.getUserAgent());

So I have a feeling some custom mobile browser handling is wrong. You might want to peek at InputMask.js and see if you see anything obvious.

[melloware]

There is even a method called handleAndroidInput!

handleAndroidInput(e) {
        let curVal = this.inputRef.current.value;
        let pos = this.caret();
        if (this.oldVal && this.oldVal.length && this.oldVal.length > curVal.length) {
            // a deletion or backspace happened
            this.checkVal(true);
            while (pos.begin > 0 && !this.tests[pos.begin - 1])
                pos.begin--;
            if (pos.begin === 0) {
                while (pos.begin < this.firstNonMaskPos && !this.tests[pos.begin])
                    pos.begin++;
            }
            this.caret(pos.begin, pos.begin);
        } else {
            this.checkVal(true);
            while (pos.begin < this.len && !this.tests[pos.begin])
                pos.begin++;

            this.caret(pos.begin, pos.begin);
        }

        if (this.props.onComplete && this.isCompleted()) {
            this.props.onComplete({
                originalEvent: e,
                value: this.getValue()
            });
        }
    }

[irv075]

Yeah, it looks like that function does not call updateModel(), like the non-android one does, but I'm not familiar enough with this project to say if it should be called. Hopefully someone else will chime in...

[melloware]

I feel like it probably should will leave it up to PrimeTek though. I don't have an Android device to test on so I don't want to suggest any fixes.

[melloware]

I analyzed this deeper and you are right the normal path calls updateModel but Android does not. Will be fixed in RC2