fix(input-amount): always format on paste
This commit is contained in:
parent
c6fbe9208a
commit
756a138433
4 changed files with 11 additions and 28 deletions
5
.changeset/friendly-pianos-pay.md
Normal file
5
.changeset/friendly-pianos-pay.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@lion/input-amount': patch
|
||||
---
|
||||
|
||||
always format on paste
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in a new issue