I am using an HTML text input which receives numeric (and comma/period) characters.
I have a JavaScript function that formats the number with comma thousands separators as it is entered (shown below).
The problem is that when a 4 digit number starting with 100 is entered from an Android device, only the first character remains after entering the 4th digit. Here is an example input:
| Input | Output | Expected |
|---|---|---|
| 1 | 1 | 1 |
| 10 | 10 | 10 |
| 100 | 100 | 100 |
| 1005 | 1 | 1,005 |
After entering "100", the spellcheck/autocorrect/suggestion bar suggests the 100 points emoji while underlining the 100 in the input field. The keyboard is also reset to default layout (from numeric keys) after entering the 4th number. This only happens in this one case so my assumption is that the emoji replacing text suggestion is having a weird interaction with the JS formatting code.
I have tried setting spellcheck="false", autocorrect="off", and autocomplete="off" in the input field but this does not fix the issue.
The formatting code is more complicated in my actual use case but this is a minimal example. formatNumber is hooked to the input event.
const formatNumber = function () {
return parseFloat($('#amount').val()).toLocaleString();
}
This was experienced on Android 12 in Chrome with Gboard (Google Keyboard).
