From eee3582bdb8c0a42ae6f45d46907e73ecb7ab77e Mon Sep 17 00:00:00 2001
From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com>
Date: Mon, 1 May 2023 17:15:41 -0500
Subject: [PATCH] Fix keyup trigger on masked input (#20454)

---
 ui/lib/core/addon/components/masked-input.hbs |  2 +-
 ui/lib/core/addon/components/masked-input.js  |  7 +++---
 .../components/masked-input-test.js           | 24 ++++++++++++++++++-
 3 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/ui/lib/core/addon/components/masked-input.hbs b/ui/lib/core/addon/components/masked-input.hbs
index a8965a22d1..c08edb9eb0 100644
--- a/ui/lib/core/addon/components/masked-input.hbs
+++ b/ui/lib/core/addon/components/masked-input.hbs
@@ -20,7 +20,7 @@
       wrap="off"
       spellcheck="false"
       {{on "change" this.onChange}}
-      {{on "keyup" (fn this.handleKeyUp @name @value)}}
+      {{on "keyup" (fn this.handleKeyUp @name)}}
       data-test-textarea
     />
   {{/if}}
diff --git a/ui/lib/core/addon/components/masked-input.js b/ui/lib/core/addon/components/masked-input.js
index 8200640885..1729b95d2c 100644
--- a/ui/lib/core/addon/components/masked-input.js
+++ b/ui/lib/core/addon/components/masked-input.js
@@ -53,10 +53,11 @@ export default class MaskedInputComponent extends Component {
     }
   }
 
-  @action handleKeyUp(name, value) {
+  @action handleKeyUp(name, evt) {
     this.updateSize();
-    if (this.onKeyUp) {
-      this.onKeyUp(name, value);
+    const { value } = evt.target;
+    if (this.args.onKeyUp) {
+      this.args.onKeyUp(name, value);
     }
   }
   @action toggleMask() {
diff --git a/ui/tests/integration/components/masked-input-test.js b/ui/tests/integration/components/masked-input-test.js
index a4ee8e075e..e6feff1f6b 100644
--- a/ui/tests/integration/components/masked-input-test.js
+++ b/ui/tests/integration/components/masked-input-test.js
@@ -5,9 +5,10 @@
 
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, focus, triggerKeyEvent } from '@ember/test-helpers';
+import { render, focus, triggerKeyEvent, typeIn, fillIn } from '@ember/test-helpers';
 import { create } from 'ember-cli-page-object';
 import hbs from 'htmlbars-inline-precompile';
+import sinon from 'sinon';
 import maskedInput from 'vault/tests/pages/components/masked-input';
 
 const component = create(maskedInput);
@@ -66,6 +67,27 @@ module('Integration | Component | masked input', function (hooks) {
     assert.dom('.masked-value').hasClass('masked-font');
   });
 
+  test('it calls onChange events with the correct values', async function (assert) {
+    const changeSpy = sinon.spy();
+    this.set('value', 'before');
+    this.set('onChange', changeSpy);
+    await render(hbs`<MaskedInput @value={{this.value}} @onChange={{this.onChange}} />`);
+    await fillIn('[data-test-textarea]', 'after');
+    assert.true(changeSpy.calledWith('after'));
+  });
+
+  test('it calls onKeyUp events with the correct values', async function (assert) {
+    const keyupSpy = sinon.spy();
+    this.set('value', '');
+    this.set('onKeyUp', keyupSpy);
+    await render(hbs`<MaskedInput @name="foo" @value={{this.value}} @onKeyUp={{this.onKeyUp}} />`);
+    await typeIn('[data-test-textarea]', 'baz');
+    assert.true(keyupSpy.calledThrice, 'calls for each letter of typing');
+    assert.true(keyupSpy.firstCall.calledWithExactly('foo', 'b'));
+    assert.true(keyupSpy.secondCall.calledWithExactly('foo', 'ba'));
+    assert.true(keyupSpy.thirdCall.calledWithExactly('foo', 'baz'));
+  });
+
   test('it does not remove value on tab', async function (assert) {
     this.set('value', 'hello');
     await render(hbs`<MaskedInput @value={{this.value}} />`);