Currency input component not working properly

[Max]

Hello,

in my latest application I need several currency inputs, but they neither seem to be working how I’d like them to, nor how they should. I don’t understand if I’m missing something or if they are in fact not working correctly.

First of all, since I’m from the EU and all of my users will be as well, I want them to enter values in the format that 90% of EU members use. This format uses dot (.) as the thousands seperator and comma (,) as the decimal seperator. Yet the format shown for the euro in the inputs Currency option, is the other way around:

Not only the euro, in fact every currency in this list displays either this format or just 1,000 because decimals are not used (I think?).

And that despite a great majority of countries in the world using the comma (,) as the decimal seperator.

But that’s only the first problem, because secondly, the example you see next to the currencies (e.g. 1,000.12) cannot be entered.
My assumption is that the currency input is almost the same as the number imput (seeing that both of the input elements use type="ubnumber") and that the Currency option for the input only changes the currency symbol. Which would inherently mean that also the number input has the same problem with the thousand and decimal seperator.
So once you entered either a comma (,) or a dot (.), you cannot enter the other, meaning it is literally impossible to write the example in the input. In fact, you can even select a currency that only displays the comma (,) in it’s example and nothing, besides the currency symbol, seems to change, you can still either use comma (,) or dot (.). But that doesn’t mean that if you enter 1,000 you’ll also get 1000 as value, because internally it still just tries to parse it and returns 1.

I’m pretty sure I’m not missing anything, so this is propbably not wanted behaviour, but I might’ve missed something.

Edit

After some testing it seems that both the number and currency input accept either comma (,) or dot (.) as decimal seperator and the Currency option indeed only changes the symbol inside the input. As described before 1,000 does translate to 1, because it gets trimmed if there’s only zero decimals. Meaning, 1,23 indeed does parse to 1.23 as JS number. So I guess it was never intended to have thousand seperators and/or change the input format based on currency?

[Kate]

Hello @Max

Thank you for the detailed investigation. I’ll consult with the dev team to see if there are any bugs or if it is expected and will let you know. Thanks!

[Kate]

Hi @Max

The team has checked your points regarding the currency input. Please find the explanations below:

• Regarding the issue where the currency selection field displays incorrect decimal points and commas: the currency selection only affects the currency symbol displayed in the input. The numerical value shown is only for example purposes and is always in the US format.

• Regarding the issue where a thousand separator and a decimal separator can’t be used simultaneously in the input: since we use input[type=number] for the currency input, the input is limited by HTML specifications, which restrict symbol input to either a comma or a period, and either of these symbols acts as a decimal separator.

• Regarding the issue where trailing zeros after the decimal separator are removed: the currency input returns a NUMBER, which in JavaScript is always formatted to remove any trailing zeros, as they are insignificant. If you need these trailing zeros in your code, you can use the .toFixed(3) function to format the number as a string with the desired number of digits after the decimal separator.

Additionally, the currency view/number view component has a locale setting where you can select the desired locale for display formatting.

Please let me know if you have any further questions here. Thanks!

[Max]

Thank you for checking!

So as I thought it’s a number input with a currency display. I suppose that works in general, still my concerns are about users writing numbers in the thousands wrong, which is why a thousand seperator would be convenient.

In the end I decided for a customized text input. But it might be a good feature request, to have a number/currency input with custom delimiters?

Anyway, if anyone is interested in the way I implemented this, check out this fiddle. It’s not exactly the way you would implement this in UI Bakery, but you get the idea.

[Kate]

Thanks Max!

I’ll add your idea to our feature requests list, and we might get back to it someday Cheers!