fix(number-field): updated number field to respect all locales (#4508)

* fix(number-field): respects-different-locales * chore(number-field): added a test for the change * chore(number-field): minor fix
adobe · May 28, 2024 · cc6e928 · cc6e928
1 parent 79db0e6
commit cc6e928
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
@@ -323,7 +323,7 @@ export class NumberField extends TextfieldBase {
 
         this.requestUpdate();
         this._value = this.validateInput(value);
-        this.inputElement.value = value.toString();
+        this.inputElement.value = this.numberFormatter.format(value);
 
         this.inputElement.dispatchEvent(
             new Event('input', { bubbles: true, composed: true })
@@ -584,13 +584,10 @@ export class NumberField extends TextfieldBase {
                     ? this.step.toString().split('.')[1].length
                     : 0
                 : 0;
-            this._valueFormatter = new NumberFormatter(
-                this.languageResolver.language,
-                {
-                    maximumFractionDigits: digitsAfterDecimal,
-                    useGrouping: false,
-                }
-            );
+            this._valueFormatter = new NumberFormatter('en', {
+                useGrouping: false,
+                maximumFractionDigits: digitsAfterDecimal,
+            });
         }
 
         return this._valueFormatter;

diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts
@@ -24,6 +24,7 @@ import {
     currency,
     decimals,
     Default,
+    germanDecimals,
     indeterminate,
     percents,
     pixels,
@@ -133,7 +134,25 @@ describe('NumberField', () => {
             expect(el.valueAsString).to.equal('5');
             expect(el.focusElement.value).to.equal('5');
         });
+        it('respects other locales', async () => {
+            const el = await getElFrom(
+                germanDecimals({
+                    step: 0.01,
+                })
+            );
+            el.value = 2.42;
+            await elementUpdated(el);
+            el.size = 'xl';
+            expect(el.value).to.equal(2.42);
+            expect(el.formattedValue).to.equal('+2,42');
+            expect(el.focusElement.value).to.equal('+2,42');
+
+            await clickBySelector(el, '.step-up');
 
+            expect(el.value).to.equal(2.43);
+            expect(el.formattedValue).to.equal('+2,43');
+            expect(el.focusElement.value).to.equal('+2,43');
+        });
         it('supports both positive and negative decimal values', async () => {
             const el = await getElFrom(
                 Default({