diff --git a/.changeset/friendly-pianos-pay.md b/.changeset/friendly-pianos-pay.md new file mode 100644 index 000000000..d33d9c79e --- /dev/null +++ b/.changeset/friendly-pianos-pay.md @@ -0,0 +1,5 @@ +--- +'@lion/input-amount': patch +--- + +always format on paste diff --git a/docs/components/inputs/input-amount/features.md b/docs/components/inputs/input-amount/features.md index a0c69d031..59de27318 100644 --- a/docs/components/inputs/input-amount/features.md +++ b/docs/components/inputs/input-amount/features.md @@ -107,7 +107,7 @@ export const noDecimals = () => html` For copy pasting numbers into the input-amount, there is slightly different parsing behavior. Normally, when it receives an input with only 1 separator character, we check the locale to determine whether this character is a thousand separator, or a decimal separator. -When a user pastes the input from a different source, we find this approach (locale-based) quite unreliable, because it may have been copied from somewhere with a different locale. +When a user pastes the input from a different source, we find this approach (locale-based) quite unreliable, because it may have been copied from a 'mathematical context' (like an Excel sheet) or a context with a different locale. Therefore, we use the heuristics based method to parse the input when it is pasted by the user. ### What this means diff --git a/packages/form-core/src/FormatMixin.js b/packages/form-core/src/FormatMixin.js index 4907de5b0..84d01ec28 100644 --- a/packages/form-core/src/FormatMixin.js +++ b/packages/form-core/src/FormatMixin.js @@ -434,8 +434,8 @@ const FormatMixinImplementation = superclass => * Whether the user is pasting content. Allows Subclassers to do this in their subclass: * @example * ```js - * _reflectBackFormattedValueToUser() { - * return super._reflectBackFormattedValueToUser() || this._isPasting; + * _reflectBackOn() { + * return super._reflectBackOn() || this._isPasting; * } * ``` * @protected diff --git a/packages/input-amount/src/LionInputAmount.js b/packages/input-amount/src/LionInputAmount.js index 2045a9201..746c2e1a4 100644 --- a/packages/input-amount/src/LionInputAmount.js +++ b/packages/input-amount/src/LionInputAmount.js @@ -68,16 +68,6 @@ export class LionInputAmount extends LocalizeMixin(LionInput) { this.formatter = formatAmount; /** @type {string | undefined} */ this.currency = undefined; - /** @private */ - this.__isPasting = false; - - this.addEventListener('paste', () => { - /** @private */ - this.__isPasting = true; - /** @private */ - this.__parserCallcountSincePaste = 0; - }); - this.defaultValidators.push(new IsNumber()); } @@ -101,24 +91,12 @@ export class LionInputAmount extends LocalizeMixin(LionInput) { } /** - * @override of FormatMixin - * @protected - */ - _callParser(value = this.formattedValue) { - // TODO: (@daKmor) input and change events both trigger parsing therefore we need to handle the second parse - this.__parserCallcountSincePaste += 1; - this.__isPasting = this.__parserCallcountSincePaste === 2; - this.formatOptions.mode = this.__isPasting === true ? 'pasted' : 'auto'; - // @ts-ignore [allow-protected] - return super._callParser(value); - } - - /** - * @override of FormatMixin + * @enhance FormatMixin: instead of only formatting on blur, also format when a user pasted + * content * @protected */ _reflectBackOn() { - return super._reflectBackOn() || this.__isPasting; + return super._reflectBackOn() || this._isPasting; } /**