Bug Fix: tab on MaskedInput for GeneratedItems it was clearing the va…

…lue (#12409) (#12416)

* fix tab issue

* add test coverage

* changelog

* update documentation

* remove meep:

* documentation

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.
+```

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

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);
+    },
   },
 });

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)}}
     <AlertInline 

ui/lib/core/addon/templates/components/masked-input.hbs

@@ -18,6 +18,10 @@
       rows=1 wrap="off"
       onkeydown={{action onKeyDown}}
       onchange={{action "updateValue"}}
+      onkeyup={{action
+        (action "handleKeyUp" name)
+        value="target.value"
+      }}
       value={{value}}
       data-test-textarea 
     />

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