fix(input-amount): handle user pasting of amounts heuristically

packages/field/src/FormatMixin.js

@@ -310,12 +310,16 @@ export const FormatMixin = dedupeMixin(
        *   `@user-input-changed` (this will happen later, when `formatOn` condition is met)
        */
       _reflectBackFormattedValueToUser() {
-        if (!this.__isHandlingUserInput) {
+        if (this._reflectBackOn()) {
           // Text 'undefined' should not end up in <input>
           this.value = typeof this.formattedValue !== 'undefined' ? this.formattedValue : '';
         }
       }
 
+      _reflectBackOn() {
+        return !this.__isHandlingUserInput;
+      }
+
       // This can be called whenever the view value should be updated. Dependent on component type
       // ("input" for <input> or "change" for <select>(mainly for IE)) a different event should be
       // used  as source for the "user-input-changed" event (which can be seen as an abstraction

packages/input-amount/src/LionInputAmount.js

@@ -46,10 +46,28 @@ export class LionInputAmount extends FieldCustomMixin(LocalizeMixin(LionInput))
     super();
     this.parser = parseAmount;
     this.formatter = formatAmount;
+    this.__isPasting = false;
+
+    this.addEventListener('paste', () => {
+      this.__isPasting = true;
+      this.__parserCallcountSincePaste = 0;
+    });
 
     this.defaultValidators.push(new IsNumber());
   }
 
+  __callParser(value = this.formattedValue) {
+    // TODO: 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';
+    return super.__callParser(value);
+  }
+
+  _reflectBackOn() {
+    return super._reflectBackOn() || this.__isPasting;
+  }
+
   connectedCallback() {
     // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();

packages/input-amount/stories/index.stories.js

@@ -34,8 +34,12 @@ storiesOf('Forms|Input Amount', module)
   .add(
     'Force locale to nl-NL',
     () => html`
-      <lion-input-amount label="Price" currency="JOD">
-        .formatOptions="${{ locale: 'nl-NL' }}" .modelValue=${123456.78}
+      <lion-input-amount
+        label="Price"
+        currency="JOD"
+        .formatOptions="${{ locale: 'nl-NL' }}"
+        .modelValue=${123456.78}
+      >
       </lion-input-amount>
     `,
   )
@@ -79,5 +83,11 @@ storiesOf('Forms|Input Amount', module)
         Make sure to set the modelValue last as otherwise formatOptions will not be taken into
         account
       </p>
+
+      <p>
+        You can copy paste <input value="4000,0" /> and it will become 4000 independent of your
+        locale. <br />
+        If you write 4000,0 manually then it will become 4000 or 40000 dependent on your locale.
+      </p>
     `,
   );