170
Views
8
Comments
[Input Mask Reactive] on change event not triggered when number is greater tha 999.
input-mask-reactive
Reactive icon
Forge asset by Steven Decock
Application Type
Reactive

When applying the mask if the number is greater than 999 ie has 4 integer value the onchange event on the input no longer triggers. 

2022-05-19 14-01-44
Varada Rajan

Hi Paul Davies,

Correct me If I understood it wrong, I understood it is behaving as Expected.

you have LIMITED the Input field not to accept more than the number 999(max), not allowing the fourth Integer to be entered?
then the Input mask prevents the keypress event itself and there is no change triggered to the input value.

my sample understanding:
Test Case


UserImage.jpg
Paul Davies

Built a demo of the issue.  As soon as you use a thousands seperator the mask no longer populates the variable after 999.



ReactiveMask_ErrorTest.oap
2024-01-16 23-21-55
Chris Palka

I'm having the same issue. It was working just fine across multiple applications I've built and have proof as the fields I have not touched populate correctly with thousands separator and all, however any new data I enter into these fields and save immediately reverts it to only 3 characters. $530,928,938 becomes $500, etc. 

2021-07-21 12-04-07
George.Qiao

Same issue here. 


When the "ThousandsSeparator" is set to "," the bug appears. Inspect the HTML element and you can see the value of the text box only takes the first 3 digits and ignore all the rest.


If the "ThousandsSeparator"  is removed as blank, the bug does NOT appear. However, we do want to separate the large number with comma, therefore, this work-around is not ideal.

UserImage.jpg
Amar Zarif Azamin

Hello, is there any updates on this? I'm having the same problem

2018-10-25 14-51-08
pmmv999

Hi everyone,

All the problems above I was able to overcome with onkeyup Event and JavaScript

Javascript Input Mask | imaskjs

InputMask_GetUnmaskedValue
$parameters.Value = document.getElementById($parameters.WidgetId).mask.unmaskedValue;

InputMask_SetValue
document.getElementById($parameters.WidgetId).mask.unmaskedValue = $parameters.Value;


For more details about the cause:
Issues and side effects with Reactive Web and Mobile apps on React 16

There could be a better solution, but I only use this in a few places so was fine for me.

Greetings,
Pedro Vieira

UserImage.jpg
Amar Zarif Azamin

Hello Pedro,

When exactly would you call those two actions?

2018-10-25 14-51-08
pmmv999


Hi Amar,

I forgot that I use a "custom version" (Created by me), but the library in question is still the same IMask_JS


I attached a working example, of what I do
Hope it helps in some way, maybe the owner of this component can use it or make a new version in the future.
Or you can create what you need from here.

Greetings,
Pedro Vieira

MaskExample.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.