fix(number-field): fixed multiple separators usecase in decimal inputs

adobe · Jun 12, 2024 · 0d57c2c · 0d57c2c
1 parent 631681f
commit 0d57c2c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts
@@ -218,16 +218,16 @@ export class NumberField extends TextfieldBase {
         const separators = this.valueBeforeFocus
             .split('')
             .filter((char) => this.decimalsChars.has(char));
-        const uniqueSeparatorCount = new Set(separators).size;
+        const uniqueSeparators = new Set(separators);
 
         if (isIPhone() && this.inputElement.inputMode === 'decimal') {
             const parts = this.numberFormatter.formatToParts(1000.1);
             const replacementDecimal = parts.find(
                 (part) => part.type === 'decimal'
             )!.value;
 
-            if (uniqueSeparatorCount === 1) {
-                const isDecimalSeparator = separators[0] === replacementDecimal;
+            for (const separator of uniqueSeparators) {
+                const isDecimalSeparator = separator === replacementDecimal;
                 if (!isDecimalSeparator && !this.isIntentDecimal) {
                     value = value.replace(separators[0], '');
                 }

diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts
@@ -117,6 +117,40 @@ describe('NumberField', () => {
             expect(el.focusElement.value).to.equal('13 377 331');
         });
     });
+    xit('correctly interprets decimal point on iPhone', async () => {
+        // setUserAgent is not currently supported by Playwright
+        await setUserAgent(
+            'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1'
+        );
+        const el = await getElFrom(decimals({ value: 1234 }));
+        expect(el.formattedValue).to.equal('1,234');
+
+        el.focus();
+        await sendKeys({ press: 'Backspace' });
+        el.blur();
+        expect(el.formattedValue).to.equal('123');
+
+        el.focus();
+        await sendKeys({ type: '45' });
+        el.blur();
+        expect(el.formattedValue).to.equal('12,345');
+
+        el.focus();
+        await sendKeys({ type: ',6' });
+        el.blur();
+        expect(el.formattedValue).to.equal('12,345.6');
+
+        el.focus();
+        await sendKeys({ type: ',7' });
+        el.blur();
+        expect(el.formattedValue).to.equal('123,456.7');
+
+        el.focus();
+        await sendKeys({ press: 'Backspace' });
+        await sendKeys({ press: 'Backspace' });
+        el.blur();
+        expect(el.formattedValue).to.equal('123,456');
+    });
     describe('Step', () => {
         it('can be 0', async () => {
             const el = await getElFrom(