Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Need to display zero fractional digits for currency, but fails on Safari / polyfill/Intl.complete.js

See original GitHub issue

Our application requires that we don’t display the fractional portion of currency. The default works fine when not using the polyfill. The polyfill displays the fractional portion by default. When I try to set maximumFractionDigits to zero, the polyfill produces the output below. Is there a different way I should be specifying zero decimal currency values?

Error
column: 84
line: 1083
message: "Value is not a number or outside accepted range"
sourceURL: "http://localhost:4200/assets/intl/polyfill/Intl.complete.js"
stack: "GetNumberOption@http://localhost:4200/assets/intl/polyfill/Intl.complete.js:1083:33
InitializeNumberFormat@http://localhost:4200/assets/intl/polyfill/Intl.complete.js:1287:31
NumberFormatConstructor@http://localhost:4200/assets/intl/polyfill/Intl.complete.js:1104:34
http://localhost:4200/assets/vendor.js:85911:40
_format@http://localhost:4200/assets/my.js:7547:48
formatNumber@http://localhost:4200/assets/my.js:7516:32
http://localhost:4200/assets/my.js:5233:75
get@http://localhost:4200/assets/vendor.js:20958:30
get@http://localhost:4200/assets/vendor.js:26218:22
valueFn@http://localhost:4200/assets/vendor.js:48344:32
value@http://localhost:4200/assets/vendor.js:27297:41
read@http://localhost:4200/assets/vendor.js:27537:26
valueFn@http://localhost:4200/assets/vendor.js:27203:24
value@http://localhost:4200/assets/vendor.js:27297:41
read@http://localhost:4200/assets/vendor.js:27537:26
valueFn@http://localhost:4200/assets/vendor.js:48440:34
value@http://localhost:4200/assets/vendor.js:27297:41
read@http://localhost:4200/assets/vendor.js:27537:26
valueFn@http://localhost:4200/assets/vendor.js:27165:37
value@http://localhost:4200/assets/vendor.js:27297:41
read@http://localhost:4200/assets/vendor.js:27537:26
readArray@http://localhost:4200/assets/vendor.js:27559:20
http://localhost:4200/assets/vendor.js:27652:25
value@http://localhost:4200/assets/vendor.js:27297:41
read@http://localhost:4200/assets/vendor.js:27537:26
render@http://localhost:4200/assets/vendor.js:46729:27
EmberRenderer_createElement@http://localhost:4200/assets/vendor.js:49511:20
Renderer_renderTree@http://localhost:4200/assets/vendor.js:19036:35
ensureChildrenAreInDOM@http://localhost:4200/assets/vendor.js:50813:30
_ensureChildrenAreInDOM@http://localhost:4200/assets/vendor.js:50776:47
invokeWithOnError@http://localhost:4200/assets/vendor.js:11434:24
flush@http://localhost:4200/assets/vendor.js:11490:19
flush@http://localhost:4200/assets/vendor.js:11295:24
end@http://localhost:4200/assets/vendor.js:10720:32
http://localhost:4200/assets/vendor.js:11123:23"

Issue Analytics

State:
Created 8 years ago
Comments:10 (5 by maintainers)

Top GitHub Comments

3reactions

jasonmitcommented, Jul 25, 2019

~~It appears you need to pass a maximumFractionDigits and a minimumFractionDigits when dealing with the polyfill. The work around is the pass both max and min:~~

{{format-number 40000.20 maximumFractionDigits=0 minimumFractionDigits=0 style="currency" currency="USD"}}

// line 961 of core.js on 1.0.0 of the Intl polyfill
var value = options[property];
// this condition line does not appear correct.  it's validating the maximumFractionDigits option value, 0, against the minimum defaults to 2 and the maximum default is 20 so this condition is truthy and maximumFractionDigits is perceived as being out of range
if (isNaN(value) || value < minimum || value > maximum)
   throw new RangeError('Value is not a number or outside accepted range');

// works
var Intl = require('intl');
new Intl.NumberFormat("en", { 
  maximumFractionDigits: 0, 
  minimumFractionDigits: 0, 
  style: 'currency', 
  currency: 'USD'
}).format(4000.33)

// throws
var Intl = require('intl');
new Intl.NumberFormat("en", { 
  maximumFractionDigits: 0, 
  style: 'currency', 
  currency: 'USD'
}).format(4000.33)

I’ve created an issue downstream in the Intl polyfill. Hopefully my workaround will suffice until it gets resolved. It’s entirely possible that the spec was implemented correctly in the Polyfill and not correctly implemented in the browser API.

Thanks for reporting.

2reactions

yfrfelipecommented, Sep 18, 2020

Just in case if someone else is facing the same issue. I got the right result with the following options: Intl.NumberFormat('pt-BR', { maximumFractionDigits: 2, minimumFractionDigits: 2, style: 'currency', currency: 'BRL' }).format(444.3)

Top Results From Across the Web

Intl.NumberFormat either 0 or two fraction digits - Stack Overflow

The correct way to do it when using Intl.NumberFormat is to set both maximumFractionDigits and minimumFractionDigits options in constructor ...

Number.prototype.toLocaleString() - JavaScript | MDN

This tests for a global Intl object, checks that it's not null and that it has a NumberFormat property that is a function....

The Complete Guide to Localizing your App with JavaScript's ...

The JavaScript Internationalization API (i18n) can help localize your site or app and increase its exposure to massive global populations ...

useNumberField – React Aria

Provides the behavior and accessibility implementation for a number field component. Number fields allow users to enter a number, and increment or decrement...

babel/polyfill

As of Babel 7.4.0, this package has been deprecated in favor of directly including `core-js/stable` (to polyfill ECMAScript features):