scottk/vault
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/vault.git synced 2025-11-01 02:57:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix keyup trigger on masked input (#20454)

Browse Source
This commit is contained in:
Chelsea Shaw
2023-05-01 17:15:41 -05:00
committed by GitHub
parent a65e746406
commit eee3582bdb
3 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/lib/core/addon/components/masked-input.hbs
View File

@@ -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}}

7
ui/lib/core/addon/components/masked-input.js
View File

@@ -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() {

24
ui/tests/integration/components/masked-input-test.js
View File

@@ -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}} />`);