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

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

Regards,

Ellakkiya.S

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.

Dorine

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.

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"

https://github.com/RobinHerbots/Inputmask/blob/5.x/README_numeric.md

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.

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