[InputMask React] Forcing 2 decimal places
Reactive icon
Forge component by João Barata
Application Type

When masking as currency is there a way to force the mask to add the trailing .00 if the user enters a whole number?

For example, if a user enters 100 we would like it to be converted to $100.00.  

Hi  Josh Herron,

There is a suffixtext property. you can try with that



Hi Josh,

I have never used this component, but i see a candidate for this right there in the screenprint of Ellakkiya : 

how about setting AlwaysShowDecimalDigits to true ?  The name of that property sounds to me like what you need.


AlwaysShowDecimalDigits seeminly does nothing.   I inspected the code that is being called by this component and that value is hard-coded to True.  (So even if I change it to false it's passed as true regardless)

I tried using the suffix text but I cannot find a way to make it work as expected I will keep playing around with various if conditions, but so far everything I tried has failed.   

I'm in the same boat, please let me know if you figure out a way, will do  the same.

2021-08-13 13-48-25
Weverton Silva

Hi Josh,

As you said, the widget is always passing true to the "digitsOptional" parameter of the mask JS.

I don't know why it isn't used, but to fix this, you can go to the OnReady action of the component and pass to the JS the correct value from the block input parameter.
Then you can just pass the value as "true" from your screen.

Change to this:

I haven't had much time to test this, but I believe this is a solution.   When I reviewed the github that this component is based on I saw a function input "enforceDigitsOnBlur"


I did a quick test where my input was set to text and updated the InputMaskAuxFunctions_min script to include the enforceDigitsOnBlur (set to true)  So far it seems to add the decimals when needed and also format properly if a whole number is entered.   I have attached screenshots showing where to add the parameter in the scripts.  (I hard coded it but you could extend to make it optional in the component)

For the normal script add this.

For the minified script add this.


That property is currently hardcoded to prevent an issue when it's used. When using that property to always show the decimal places, when you use the "delete" key or "backspace key" the changes in the decimal places values are not reflected on the OutSystems variable.

Since this could lead to incorrect data, I decided to remove the functionality temporarily until I'm able to come up with a solution.

In the meantime, consider using the latest version of the component with the new "Numeric Input" option to overcome this limitation.


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