diff --git a/lib/ui/elements/numericInput.mjs b/lib/ui/elements/numericInput.mjs index 4b76f3cfa..6f0351125 100644 --- a/lib/ui/elements/numericInput.mjs +++ b/lib/ui/elements/numericInput.mjs @@ -55,7 +55,7 @@ function oninput(e, params) { params.stringValue = e.target.value // Assign numeric newValue. - params.newValue = mapp.utils.unformatStringValue(params) + params.newValue = params.onRangeInput ? params.stringValue : mapp.utils.unformatStringValue(params); if (params.numericChecks(params.newValue, params)) { @@ -81,13 +81,15 @@ function oninput(e, params) { } // The invalid input should not be formatted. - if (params.invalid) return; + if (params.invalid) return; // Pass valid newValue to callback method. params.callback(params.newValue) // Re-format the params numeric value (newValue || value) and set as input string value. e.target.value = mapp.utils.formatNumericValue(params) + //Mark the onRangeInput to false is the origin of the input call could come from either a slider or input + params.onRangeInput = false; } /** diff --git a/lib/ui/elements/slider.mjs b/lib/ui/elements/slider.mjs index 1e0aea5ed..3580438d0 100644 --- a/lib/ui/elements/slider.mjs +++ b/lib/ui/elements/slider.mjs @@ -66,7 +66,7 @@ export default function slider(params) { max=${params.max} step=${params.step} value=${params.value} - oninput=${onRangeInput}>` + oninput=${e => onRangeInput(e, params)}>` return params.sliderElement @@ -80,11 +80,13 @@ export default function slider(params) { @param {Object} e oninput event from range type input. */ - function onRangeInput(e) { + function onRangeInput(e, params) { // Range type input return a string target.value. const val = Number(e.target.value) + params.onRangeInput = true; + numericInput.value = val // Trigger formatting and numeric checks. diff --git a/lib/utils/numericFormatter.mjs b/lib/utils/numericFormatter.mjs index 196ccff48..a61c12fc3 100644 --- a/lib/utils/numericFormatter.mjs +++ b/lib/utils/numericFormatter.mjs @@ -120,13 +120,19 @@ export function unformatStringValue(params) { const numberFormatter = new Intl.NumberFormat(params.formatterParams.locale); // Get the parts of a formatted number (1.1 is used as an example) - const parts = numberFormatter.formatToParts(1.1); + const parts = numberFormatter.formatToParts(10000.1); // Find the decimal separator used in this locale const decimalSeperator = parts.find(part => part.type === 'decimal')?.value; + //Find the thousand seperator used in the locale + const thousandSeperator = parts.find(part => part.type === 'group')?.value; + + // Replace the locale-specific decimal separator with a standard period + let normalisedValue = stringValue.replaceAll(thousandSeperator, ''); + // Replace the locale-specific decimal separator with a standard period - const normalisedValue = stringValue.replace(decimalSeperator, '.'); + normalisedValue = normalisedValue.replace(decimalSeperator, '.'); // Remove any non-numeric characters, except for period and minus sign const cleanedValue = normalisedValue.replace(/[^\d.-]/g, ''); diff --git a/tests/lib/utils/numericFormatter.test.mjs b/tests/lib/utils/numericFormatter.test.mjs index 134517237..c2de942e1 100644 --- a/tests/lib/utils/numericFormatter.test.mjs +++ b/tests/lib/utils/numericFormatter.test.mjs @@ -10,14 +10,14 @@ export async function numericFormatterTest() { await codi.describe('Utils: numericFormatter Test', async () => { const params = { - stringValue: '654321.987', + value: 654321.987, prefix: '$', formatterParams: { - locale: 'UK' + locale: 'en-UK' } }; - const expected_value = 654321.987 + const expected_value = 654321.99 /** * ### Should unformat UK locale string * This test is used to check if a localised string to UK returns the correct string. @@ -25,6 +25,7 @@ export async function numericFormatterTest() { */ await codi.it('Should unformat UK locale strings', async () => { + mapp.utils.formatNumericValue(params); const unformattedString = mapp.utils.unformatStringValue(params) codi.assertEqual(unformattedString, expected_value, `We expect the value to equal ${expected_value}, we received ${unformattedString}`) }); @@ -35,15 +36,17 @@ export async function numericFormatterTest() { */ await codi.it('Should unformat DE locale strings', async () => { //Settings the locale to 'DE' - params.formatterParams.locale = 'DE' + params.formatterParams.locale = 'de-AT'; + mapp.utils.formatNumericValue(params); const unformattedString = mapp.utils.unformatStringValue(params) codi.assertEqual(unformattedString, expected_value, `We expect the value to equal ${expected_value}, we received ${unformattedString}`) }); await codi.it('Should unformat PL locale strings', async () => { //Settings the locale to 'PL' - params.formatterParams.locale = 'PL' + params.formatterParams.locale = 'PL'; + mapp.utils.formatNumericValue(params); const unformattedString = mapp.utils.unformatStringValue(params) codi.assertEqual(unformattedString, expected_value, `We expect the value to equal ${expected_value}, we received ${unformattedString}`) @@ -51,7 +54,8 @@ export async function numericFormatterTest() { await codi.it('Should unformat RUB locale strings', async () => { //Settings the locale to 'RUB' - params.formatterParams.locale = 'RUB' + params.formatterParams.locale = 'RUB'; + mapp.utils.formatNumericValue(params); const unformattedString = mapp.utils.unformatStringValue(params) codi.assertEqual(unformattedString, expected_value, `We expect the value to equal ${expected_value}, we received ${unformattedString}`)