fix(input-amount): always format on paste

This commit is contained in:
Thijs Louisse 2021-04-20 10:33:09 +02:00
parent c6fbe9208a
commit 756a138433
4 changed files with 11 additions and 28 deletions

View file

@ -0,0 +1,5 @@
---
'@lion/input-amount': patch
---
always format on paste

View file

@ -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

View file

@ -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

View file

@ -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;
}
/**