UI - masked input onchange (#6586)

* update masked-input to work with form-field component

* add test for masked input onChange functionality

* fix doc changes

ui/app/components/masked-input.js

@@ -7,18 +7,19 @@ import autosize from 'autosize';
  * `MaskedInput` components are textarea inputs where the input is hidden. They are used to enter sensitive information like passwords.
  *
  * @example
- * ```js
  * <MaskedInput
  *  @value={{attr.options.defaultValue}}
  *  @placeholder="secret"
  *  @allowCopy={{true}}
+ *  @onChange={{action "someAction"}}
  * />
- * ```
  *
  * @param [value] {String} - The value to display in the input.
  * @param [placeholder=value] {String} - The placeholder to display before the user has entered any 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.
+ *
  *
  */
 
@@ -63,8 +64,9 @@ export default Component.extend({
       this.toggleProperty('isMasked');
     },
     updateValue(e) {
-      this.set('value', e.target.value);
-      this.onChange();
+      let value = e.target.value;
+      this.set('value', value);
+      this.onChange(value);
     },
   },
 });

ui/app/templates/components/form-field.hbs

@@ -138,6 +138,7 @@
     @value={{or (get model valuePath) attr.options.defaultValue}}
     @placeholder=""
     @allowCopy="true"
+    @onChange={{action (action "setAndBroadcast" valuePath)}}
    />
 
 {{else if (or (eq attr.type "number") (eq attr.type "string"))}}

ui/app/templates/components/masked-input.hbs

@@ -1,4 +1,4 @@
-<div class="masked-input {{if shouldObscure "masked"}} {{if displayOnly "display-only"}} {{if allowCopy "allow-copy"}}" data-test-masked-input>
+<div class="masked-input {{if shouldObscure "masked"}} {{if displayOnly "display-only"}} {{if allowCopy "allow-copy"}}" data-test-masked-input data-test-field>
 	{{#if displayOnly}}
 		<pre class="masked-value display-only is-word-break">{{displayValue}}</pre>
   {{else}}

ui/stories/masked-input.md

@@ -10,17 +10,18 @@
 | [placeholder] | <code>String</code> | <code>value</code> | The placeholder to display before the user has entered any input. |
 | [allowCopy] | <code>bool</code> | <code></code> | Whether or not the input should render with a copy button. |
 | [displayOnly] | <code>bool</code> | <code>false</code> | Whether or not to display the value as a display only `pre` element or as an input. |
+| [onChange] | <code>function</code> \| <code>action</code> | <code>Function.prototype</code> | A function to call when the value of the input changes. |
 
 **Example**
   
 ```js
-<MaskedInput
- @value={{attr.options.defaultValue}}
- @placeholder="secret"
- @allowCopy={{true}}
-/>
+ <MaskedInput
+  @value={{attr.options.defaultValue}}
+  @placeholder="secret"
+  @allowCopy={{true}}
+  @onChange={{action "someAction"}}
+ />
 ```
- 
 
 **See**
 

ui/tests/integration/components/form-field-test.js

@@ -118,8 +118,11 @@ module('Integration | Component | form field', function(hooks) {
   });
 
   test('it renders: sensitive', async function(assert) {
-    await setup.call(this, createAttr('password', 'string', { sensitive: true }));
+    let [model, spy] = await setup.call(this, createAttr('password', 'string', { sensitive: true }));
     assert.ok(component.hasMaskedInput, 'renders the masked-input component');
+    await component.fields[0].textarea('secret');
+    assert.equal(model.get('password'), 'secret');
+    assert.ok(spy.calledWith('password', 'secret'), 'onChange called with correct args');
   });
 
   test('it uses a passed label', async function(assert) {