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``); + 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``); + 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``);