numericFormatter locale issue

[RobAndrewHurst]

Description

The numeric formatter fails on slider element input elements for a user with a locale that uses comma decimals, eg. DE 🇩🇪

The comma seperator isn't displayed and the return is an integer instead of a float.

GitHub Issue

#1499

Type of Change

• ✅ Bug fix (non-breaking change which fixes an issue)
• ✅ Testing

Testing Checklist

• ✅ Existing Tests still pass
• ✅ New Tests Added

---

• To see the specific tasks where the Asana app for GitHub is being used, see below:
  • https://app.asana.com/0/0/1208407306088410

[RobAndrewHurst]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

I think this is what we are looking for to solve this.

[RobAndrewHurst]

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format

And this!

[RobAndrewHurst]

I have added in a number formatter on both the formatNumericValue & unformatStringValue functions. The formatter is an object that is created from a given locale. This is how we determine how numbers are formatted.

// Create a number formatter using the specified locale
const numberFormatter = new Intl.NumberFormat(params.formatterParams.locale);

I then use the formatter to break down the number into parts (digits, decimal seprator etc.)

const parts = numberFormatter.formatToParts(1.1);

After that I find the decimal separator which is used in the locale, by looking for the 'decimal' type in the parts array.

// Find the decimal separator used in this locale
const decimalSeperator = parts.find(part => part.type === 'decimal')?.value;

Then we replace the locale-specific decimal separator in the stringValue with a period. This normalises the number so that Javascript can perform a parseFloat.

// Replace the locale-specific decimal separator with a standard period
const normalisedValue = stringValue.replace(decimalSeperator, '.');

Then we replace any characters that aren't digits, periods, or minus signs. This will clean up thousand separators.

// Remove any non-numeric characters, except for period and minus sign
const cleanedValue = normalisedValue.replace(/[^\d.-]/g, '');

[RobAndrewHurst]

Changes to how sliders get formatted as changed.

The value coming from a slider to the numericInput function input will not be formatted unlike a value from a numericInput. Therefore we need a check if we need to format that value with the utility.

I have added in a flag onRangInput from the slider onRangeInput function to indicate to the input function that we do not need to format the value.

[simon-leech]

I pushed one commit, the oninput was not calling onRangeInput correctly. I have updated it to this line of code:

oninput=${e => onRangeInput(e, params)}>`

I have tested this using English, German, French and Thai in XYZ and all working for me :)

[AlexanderGeere]

Lgtm

[simon-leech]

On an editable infoj entry, with a value of say 9999 - it is impossible to set this back to null. this should be possible.

This fails as CSS invalid gets applied so you can't save it.

When using a range slider on the infoj entry too, if the value is null - then the slider does not appear, which it should.

[RobAndrewHurst]

When using a range slider on the infoj entry too, if the value is null - then the slider does not appear, which it should.

This is because of this logic

This is ready for re-review!

[cityremade]

looks good to me. Icon scaling with default set with 2 decimals reformats ok. Also when editing numeric location fields incorrect separator is prevented 👍

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[simon-leech]

All good with me now - thanks @RobAndrewHurst

[dbauszus-glx]

lgtm