paper-input: Fix md-input-has-value when value attr is not observable

addon/components/paper-input.js

@@ -9,13 +9,13 @@ import maxValidator from 'ember-paper/validators/max';
 import minlengthValidator from 'ember-paper/validators/minlength';
 import maxlengthValidator from 'ember-paper/validators/maxlength';
 
-const { $, computed, isArray, isEmpty, Logger, A, run, assert, get } = Ember;
+const { $, computed, observer, isArray, isEmpty, Logger, A, run, assert, get } = Ember;
 
 export default BaseFocusable.extend(ColorMixin, FlexMixin, {
   tagName: 'md-input-container',
   classNames: ['md-default-theme'],
   classNameBindings: [
-    'hasValue:md-input-has-value',
+    'inputHasValue:md-input-has-value',
     'isInvalid:md-input-invalid',
     'eitherIcon:md-has-icon',
     'iconRight:md-icon-right',
@@ -29,8 +29,14 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
   isTouched: false,
   lastIsInvalid: undefined,
 
-  hasValue: computed('value', 'isNativeInvalid', function() {
-    let value = this.get('value');
+  inputValue: computed.oneWay('value'),
+  updateInputValue: observer('value', function() {
+    // Honor changes to `value` even if inputValue has deviated (DDAU)
+    this.set('inputValue', this.get('value'));
+  }),
+
+  inputHasValue: computed('inputValue', 'isNativeInvalid', function() {
+    let value = this.get('inputValue');
     let isNativeInvalid = this.get('isNativeInvalid');
     return !isEmpty(value) || isNativeInvalid;
   }),
@@ -208,6 +214,7 @@ export default BaseFocusable.extend(ColorMixin, FlexMixin, {
 
   actions: {
     handleInput(e) {
+      this.set('inputValue', e.target.value);
       this.sendAction('onChange', e.target.value);
       this.growTextarea();
       let inputElement = this.$('input').get(0);

app/templates/components/paper-input.hbs

@@ -11,7 +11,7 @@
     class="md-input {{if isInvalid "ng-invalid"}} {{if isTouched "ng-dirty"}}"
     id={{inputElementId}}
     placeholder={{placeholder}}
-    value={{value}}
+    value={{inputValue}}
     disabled={{disabled}}
     autofocus={{autofocus}}
     onfocus={{onFocus}}
@@ -38,7 +38,7 @@
     id={{inputElementId}}
     placeholder={{placeholder}}
     type={{type}}
-    value={{value}}
+    value={{inputValue}}
     disabled={{disabled}}
     autofocus={{autofocus}}
     onfocus={{onFocus}}

tests/integration/components/paper-input-test.js

@@ -409,3 +409,83 @@ test('the `onChange` action is mandatory for paper-input', function(assert) {
     `);
   }, /`onChange` action/);
 });
+
+test('inputHasValue works when user types', function(assert) {
+  this.foo = '';
+  this.render(hbs`{{paper-input value=foo onChange=(action (mut foo))}}`);
+
+  assert.notOk(
+    this.$('md-input-container').hasClass('md-input-has-value'),
+    'should not have md-input-has-value class if input does not have value'
+  );
+
+  let $input = this.$('md-input-container input');
+  $input.val('abc').trigger('input');
+
+  assert.ok(
+    this.$('md-input-container').hasClass('md-input-has-value'),
+    'should have md-input-has-value class if input has value'
+  );
+});
+
+test('inputHasValue works when `value` updated programatically', function(assert) {
+  this.foo = '';
+  this.render(hbs`{{paper-input value=foo onChange=(action (mut foo))}}`);
+
+  assert.notOk(
+    this.$('md-input-container').hasClass('md-input-has-value'),
+    'should not have md-input-has-value class if input does not have value'
+  );
+
+  this.set('foo', 'abc');
+
+  assert.ok(
+    this.$('md-input-container').hasClass('md-input-has-value'),
+    'should have md-input-has-value class if input has value'
+  );
+});
+
+test('inputHasValue works when user types even if `value` is not updated', function(assert) {
+  this.render(hbs`{{paper-input value="" onChange=null}}`);
+
+  assert.notOk(
+    this.$('md-input-container').hasClass('md-input-has-value'),
+    'should not have md-input-has-value class if input does not have value'
+  );
+
+  let $input = this.$('md-input-container input');
+  $input.val('abc').trigger('input');
+
+  assert.ok(
+    this.$('md-input-container').hasClass('md-input-has-value'),
+    'should have md-input-has-value class if input has value'
+  );
+});
+
+test('setting value updates input value even if it previously deviated', function(assert) {
+  // Ensuring that DDAU is honored
+  this.foo = 'XYZ';
+  this.render(hbs`{{paper-input value=foo onChange=null}}`);
+
+  assert.ok(
+    this.$('md-input-container').hasClass('md-input-has-value'),
+    'should have md-input-has-value class if input has value'
+  );
+
+  let $input = this.$('md-input-container input');
+
+  assert.equal($input.val(), 'XYZ', 'Initial input value should be the value of foo');
+
+  $input.val('abc').trigger('input');
+
+  assert.equal($input.val(), 'abc', 'Typing into the input should update its value');
+  assert.equal(this.get('foo'), 'XYZ', 'Typing into the input does not update foo');
+
+  this.set('foo', '');
+
+  assert.equal($input.val(), '', 'Setting foo should update the input value');
+  assert.notOk(
+    this.$('md-input-container').hasClass('md-input-has-value'),
+    'should not have md-input-has-value class if input does not have value'
+  );
+});