ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(input-amount): always format on paste

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/friendly-pianos-pay.md Normal file
View file

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

2
docs/components/inputs/input-amount/features.md
View file

@ -107,7 +107,7 @@ export const noDecimals = () => html`
For copy pasting numbers into the input-amount, there is slightly different parsing behavior. 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. 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. Therefore, we use the heuristics based method to parse the input when it is pasted by the user.
### What this means ### What this means

4
packages/form-core/src/FormatMixin.js
View file

@ -434,8 +434,8 @@ const FormatMixinImplementation = superclass =>
* Whether the user is pasting content. Allows Subclassers to do this in their subclass: * Whether the user is pasting content. Allows Subclassers to do this in their subclass:
* @example * @example
* ```js * ```js
* _reflectBackFormattedValueToUser() { * _reflectBackOn() {
* return super._reflectBackFormattedValueToUser() || this._isPasting; * return super._reflectBackOn() || this._isPasting;
* } * }
* ``` * ```
* @protected * @protected

28
packages/input-amount/src/LionInputAmount.js
View file

@ -68,16 +68,6 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
this.formatter = formatAmount; this.formatter = formatAmount;
/** @type {string | undefined} */ /** @type {string | undefined} */
this.currency = undefined; this.currency = undefined;
/** @private */
this.__isPasting = false;
this.addEventListener('paste', () => {
/** @private */
this.__isPasting = true;
/** @private */
this.__parserCallcountSincePaste = 0;
});
this.defaultValidators.push(new IsNumber()); this.defaultValidators.push(new IsNumber());
} }
@ -101,24 +91,12 @@ export class LionInputAmount extends LocalizeMixin(LionInput) {
} }
/** /**
* @override of FormatMixin * @enhance FormatMixin: instead of only formatting on blur, also format when a user pasted
* @protected * content
*/
_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
* @protected * @protected
*/ */
_reflectBackOn() { _reflectBackOn() {
return super._reflectBackOn() || this.__isPasting; return super._reflectBackOn() || this._isPasting;
} }
/** /**