From 4031960551a20ba22d466bc269882523161d86e9 Mon Sep 17 00:00:00 2001 From: Angel Garbarino Date: Tue, 24 Aug 2021 08:59:37 -0600 Subject: [PATCH] Bug Fix: tab on MaskedInput for GeneratedItems it was clearing the value (#12409) * fix tab issue * add test coverage * changelog * update documentation * remove meep: * documentation --- changelog/12409.txt | 3 +++ ui/lib/core/addon/components/form-field.js | 2 +- ui/lib/core/addon/components/masked-input.js | 6 ++++++ ui/lib/core/addon/templates/components/form-field.hbs | 6 ++---- .../core/addon/templates/components/masked-input.hbs | 4 ++++ ui/tests/integration/components/masked-input-test.js | 11 ++++++++++- 6 files changed, 26 insertions(+), 6 deletions(-) create mode 100644 changelog/12409.txt diff --git a/changelog/12409.txt b/changelog/12409.txt new file mode 100644 index 000000000..483a15175 --- /dev/null +++ b/changelog/12409.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: fix issue where on MaskedInput on auth methods if tab it would clear the value. +``` diff --git a/ui/lib/core/addon/components/form-field.js b/ui/lib/core/addon/components/form-field.js index 0d9049ddf..b8f0b34b0 100644 --- a/ui/lib/core/addon/components/form-field.js +++ b/ui/lib/core/addon/components/form-field.js @@ -18,7 +18,7 @@ import layout from '../templates/components/form-field'; * ``` * * @param [onChange=null] {Func} - Called whenever a value on the model changes via the component. - * @param [onKeyUp=null] {Func} - Called whenever cp-validations is being used and you need to validation on keyup. Send name of field and value of input. + * @param [onKeyUp=null] {Func} - A function passed through into MaskedInput to handle validation. It is also handled for certain form-field types here in the action handleKeyUp. * @param attr=null {Object} - This is usually derived from ember model `attributes` lookup, and all members of `attr.options` are optional. * @param model=null {DS.Model} - The Ember Data model that `attr` is defined on * @param [disabled=false] {Boolean} - whether the field is disabled diff --git a/ui/lib/core/addon/components/masked-input.js b/ui/lib/core/addon/components/masked-input.js index e96703239..77c65f53f 100644 --- a/ui/lib/core/addon/components/masked-input.js +++ b/ui/lib/core/addon/components/masked-input.js @@ -11,12 +11,14 @@ import layout from '../templates/components/masked-input'; * @value={{attr.options.defaultValue}} * @allowCopy={{true}} * @onChange={{action "someAction"}} + * @onKeyUp={{action "onKeyUp"}} * /> * * @param [value] {String} - The value to display in the input. * @param [allowCopy=null] {bool} - Whether or not the input should render with a copy button. * @param [displayOnly=false] {bool} - Whether or not to display the value as a display only `pre` element or as an input. * @param [onChange=Function.prototype] {Function|action} - A function to call when the value of the input changes. + * @param [onKeyUp=Function.prototype] {Function|action} - A function to call whenever on the dom event onkeyup. Generally passed down from higher level parent. * @param [isCertificate=false] {bool} - If certificate display the label and icons differently. * */ @@ -38,6 +40,7 @@ export default Component.extend({ }, displayOnly: false, onKeyDown() {}, + onKeyUp() {}, onChange() {}, actions: { toggleMask() { @@ -48,5 +51,8 @@ export default Component.extend({ this.set('value', value); this.onChange(value); }, + handleKeyUp(name, value) { + this.onKeyUp(name, value); + }, }, }); diff --git a/ui/lib/core/addon/templates/components/form-field.hbs b/ui/lib/core/addon/templates/components/form-field.hbs index 6503d93e6..39eec6e68 100644 --- a/ui/lib/core/addon/templates/components/form-field.hbs +++ b/ui/lib/core/addon/templates/components/form-field.hbs @@ -191,10 +191,8 @@ @value={{or (get model valuePath) attr.options.defaultValue}} @allowCopy="true" @onChange={{action (action "setAndBroadcast" valuePath)}} - onkeyup={{action - (action "handleKeyUp" attr.name) - value="target.value" - }} + @name={{attr.name}} + @onKeyUp={{@onKeyUp}} /> {{#if (get validationMessages attr.name)}} diff --git a/ui/tests/integration/components/masked-input-test.js b/ui/tests/integration/components/masked-input-test.js index 66c815f30..1eb5be7a1 100644 --- a/ui/tests/integration/components/masked-input-test.js +++ b/ui/tests/integration/components/masked-input-test.js @@ -1,6 +1,6 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render, focus } from '@ember/test-helpers'; +import { render, focus, triggerKeyEvent } from '@ember/test-helpers'; import { create } from 'ember-cli-page-object'; import hbs from 'htmlbars-inline-precompile'; import maskedInput from 'vault/tests/pages/components/masked-input'; @@ -88,4 +88,13 @@ module('Integration | Component | masked input', function(hooks) { await focus('.masked-value'); assert.dom('.masked-value').hasClass('masked-font'); }); + + test('it does not remove value on tab', async function(assert) { + this.set('value', 'hello'); + await render(hbs`{{masked-input value=value}}`); + await triggerKeyEvent('[data-test-textarea]', 'keydown', 9); + await component.toggleMasked(); + let unMaskedValue = document.querySelector('.masked-value').value; + assert.equal(unMaskedValue, this.value); + }); });