feat(): handle pasted strings

qonto · Mar 8, 2024 · 7d5cd55 · 7d5cd55
1 parent 3540730
commit 7d5cd55
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/ember-amount-input/src/components/amount-input.hbs b/ember-amount-input/src/components/amount-input.hbs
@@ -16,6 +16,7 @@
     readonly={{@readonly}}
     {{on 'keydown' this.onKeyDown}}
     {{on 'input' this.onInput}}
+    {{on 'paste' this.onPaste}}
     {{on 'focusout' this.onFocusOut}}
   />
 </div>
diff --git a/ember-amount-input/src/components/amount-input.ts b/ember-amount-input/src/components/amount-input.ts
@@ -154,6 +154,18 @@ export default class AmountInput extends Component<AmountInputSignature> {
     return true;
   }
 
+  @action
+  onPaste(event: ClipboardEvent): boolean {
+    const pastedValue = event.clipboardData?.getData('text');
+    const parsedValue = parseFloat(pastedValue?.replace(/\s/g, '') ?? '');
+
+    if (!isNaN(parsedValue)) {
+      this.args.update(parsedValue.toFixed(this.numberOfDecimal));
+    }
+
+    return true;
+  }
+
   @action
   onFocusOut(event: FocusEvent): boolean {
     if (event.target instanceof HTMLInputElement) {

diff --git a/test-app/tests/integration/components/amount-input/component-test.ts b/test-app/tests/integration/components/amount-input/component-test.ts
@@ -3,6 +3,7 @@ import { setupRenderingTest } from 'ember-qunit';
 import { blur, fillIn, render, typeIn } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import type { TestContext as TestContextBase } from '@ember/test-helpers';
+import { simulateUserPasteValue } from './helpers/paste-value';
 
 interface TestContext extends TestContextBase {
   value: number | string;
@@ -105,7 +106,7 @@ module('Integration | Component | amount-input', function (hooks) {
     await render<TestContext>(hbs`
       <AmountInput
         @value={{this.value}}
-        @update={{fn (mut this.value)}} 
+        @update={{fn (mut this.value)}}
         @readonly={{true}}
       />
     `);
@@ -185,4 +186,40 @@ module('Integration | Component | amount-input', function (hooks) {
 
     assert.dom('input').hasValue('61');
   });
+
+  module('when user pastes a value with spaces', function () {
+    module('and the value contains spaces', function () {
+      test('calls update with the formatted value on blur without the spaces', async function (assert) {
+        await render<TestContext>(hbs`
+          <AmountInput
+            @value={{this.value}}
+            @update={{fn (mut this.value)}}
+          />
+        `);
+
+        await simulateUserPasteValue('input', '1 061,00');
+
+        assert.dom('input').hasValue('1061.00');
+
+        await simulateUserPasteValue('input', '  1  061');
+
+        assert.dom('input').hasValue('1061.00');
+      });
+    });
+
+    module('and the value is not a valid amount', function () {
+      test('calls update with an empty string value', async function (assert) {
+        await render<TestContext>(hbs`
+        <AmountInput
+          @value={{this.value}}
+          @update={{fn (mut this.value)}}
+        />
+      `);
+
+        await simulateUserPasteValue('input', 'foo');
+
+        assert.dom('input').hasValue('');
+      });
+    });
+  });
 });