diff --git a/packages/number-field/src/NumberField.ts b/packages/number-field/src/NumberField.ts index fcf2e8d6b3..9a2dcc5a90 100644 --- a/packages/number-field/src/NumberField.ts +++ b/packages/number-field/src/NumberField.ts @@ -210,18 +210,46 @@ export class NumberField extends TextfieldBase { ); } + private decimalsChars = new Set(['.', ',']); + private valueBeforeFocus: string = ''; + private isIntentDecimal: boolean = false; + private convertValueToNumber(value: string): number { - if (isIPhone() && this.inputElement.inputMode === 'decimal') { + const separators = this.valueBeforeFocus + .split('') + .filter((char) => this.decimalsChars.has(char)); + const uniqueSeparators = new Set(separators); + + if ( + isIPhone() && + this.inputElement.inputMode === 'decimal' && + value !== this.valueBeforeFocus + ) { const parts = this.numberFormatter.formatToParts(1000.1); - const sourceDecimal = value - .split('') - .find((char) => char === ',' || char === '.'); + const replacementDecimal = parts.find( (part) => part.type === 'decimal' - )?.value; - if (sourceDecimal && replacementDecimal) { - value = value.replace(sourceDecimal, replacementDecimal); + )!.value; + + for (const separator of uniqueSeparators) { + const isDecimalSeparator = separator === replacementDecimal; + if (!isDecimalSeparator && !this.isIntentDecimal) { + value = value.replace(new RegExp(separator, 'g'), ''); + } + } + + let hasReplacedDecimal = false; + const valueChars = value.split(''); + for (let index = valueChars.length - 1; index >= 0; index--) { + const char = valueChars[index]; + if (this.decimalsChars.has(char)) { + if (!hasReplacedDecimal) { + valueChars[index] = replacementDecimal; + hasReplacedDecimal = true; + } else valueChars[index] = ''; + } } + value = valueChars.join(''); } return this.numberParser.parse(value); } @@ -379,12 +407,14 @@ export class NumberField extends TextfieldBase { this._trackingValue = this.inputValue; this.keyboardFocused = !this.readonly && true; this.addEventListener('wheel', this.onScroll, { passive: false }); + this.valueBeforeFocus = this.inputElement.value; } protected override onBlur(_event: FocusEvent): void { super.onBlur(_event); this.keyboardFocused = !this.readonly && false; this.removeEventListener('wheel', this.onScroll); + this.isIntentDecimal = false; } private handleFocusin(): void { @@ -441,7 +471,7 @@ export class NumberField extends TextfieldBase { }); } - protected override handleInput(event: Event): void { + protected override handleInput(event: InputEvent): void { if (this.isComposing) { event.stopPropagation(); return; @@ -454,6 +484,9 @@ export class NumberField extends TextfieldBase { '' ); } + if (event.data && this.decimalsChars.has(event.data)) + this.isIntentDecimal = true; + const { value: originalValue, selectionStart } = this.inputElement; const value = originalValue .split('') diff --git a/packages/number-field/test/number-field.test.ts b/packages/number-field/test/number-field.test.ts index 42f625d332..8d68100259 100644 --- 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(