Vanilla NumberField: formatting issue

[m.ferette]

Hello,

We use your products in European countries, where the decimal separator is "," and the grouping separator is "." or " ".

When creating a NumberField as follows:

new NumberField({
    appendTo : targetElement,
    width    : 150,
    label    : 'Enter a number',
    style    : 'margin-right: .5em',
    format:  "9.999,#",
    step: 0.1
});

Typing into the field creates errors (see attachments).

When creating a NumberField as follows:

new NumberField({
    appendTo : targetElement,
    width    : 150,
    label    : 'Enter a number',
    style    : 'margin-right: .5em',
    format:  {
        fraction: [0, 1],
        decimalSeparator: ",",
        groupSeparator: "."
    },
    step: 0.1
});

Numbers are displayed correctly, but:

• Typing "1.2" is parsed as "1,2" => I would expect "12".

• Typing "1,2" is parsed as "12" => I would expect "1,2".

So the parsing and the formatting are not consistent.

Am I missing something or is this a bug?

Best regards,

[marcio]

Hello m.ferette,

Thanks for reaching out.

The issue is that NumberField uses our NumberFormat, which respects the locale for which characters are used for decimal/grouping. The template characters (',' to enable grouping and '.' to mark the decimal position) are placeholders — not literal separators — so supplying decimalSeparator / groupSeparator in your format object is not a supported NumberFormat config and will cause inconsistent parse/format behaviour.

Solution: provide a proper NumberFormat config with the desired locale (or set the global LocaleManager) and use a template that describes digit grouping/precision. Example for German-style separators:

new NumberField({
    appendTo : targetElement,
    width    : 150,
    label    : 'Enter a number',
    format   : { template : '9,999.#', locale : 'de-DE' },
    step     : 0.1
});

You can see it working live here - https://codepen.io/marciogurka/pen/YPyRMKw.

[m.ferette]

Hi Marcio,

Thanks for your answer.
I applied your recommendation and it works as expected.

Best regards,