loading...
Cover image for Input field type "Currency" problem solved πŸ’²πŸ’‘

Input field type "Currency" problem solved πŸ’²πŸ’‘

techworld_with_nana profile image Techworld with Nana ・1 min read

Just recently we implemented a calculator for property yield. So in our calculator, there were some currency input fields, obviously, where user can enter purchase price etc. And these input fields needed to be formatted in German, since most of our users are German.

The problem

The annoying problem we had was, how to display the formatted number while also using it to calculate some other values, because <input type=β€œnumber” /> doesn’t allow displaying German format - 1.000,00.

UI example below:
UI Currency

Side note: we use React-Intl to format the number into a language-specific currency.

Solution

After trying out several options, we came up with the following simple solution:

We use the <input type=number” /> when input field is in focus and save the value in state as a number to use it in calculations. When the input field loses focus (onBlur callback), we switch the Input field to <input type=β€œtext” /> to display the formatted number currency.

Code snippet below:
input field currency react

This way, in order to display and calculate the same value, we don’t have to transform it from number to string and vice versa. Also this requires minimal code change.


You can follow me on Twitter and YouTube.

Posted on by:

techworld_with_nana profile

Techworld with Nana

@techworld_with_nana

DevOps Consultant | YouTuber 🎬 | Software Engineer πŸ‘©πŸ»β€πŸ’» Based in Austria πŸ‡¦πŸ‡Ή

Discussion

markdown guide