fix(...) input validations (#958)

1. For paper-input, validate only when its value changes. 2. For paper-autocomplete, validate only when selection is changed.
adopted-ember-addons · Jul 25, 2018 · 9a840b9 · 9a840b9
1 parent 19df96a
commit 9a840b9
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/addon/components/paper-autocomplete.js b/addon/components/paper-autocomplete.js
@@ -105,6 +105,11 @@ export default PowerSelect.extend(ValidationMixin, ChildMixin, {
     this._super(...arguments);
   },
 
+  updateSelection() {
+    this._super(...arguments);
+    this.notifyValidityChange();
+  },
+
   actions: {
 
     onTriggerMouseDown() {

diff --git a/addon/components/paper-input.js b/addon/components/paper-input.js
@@ -71,7 +71,14 @@ export default Component.extend(FocusableMixin, ColorMixin, ChildMixin, Validati
   didReceiveAttrs() {
     this._super(...arguments);
     assert('{{paper-input}} requires an `onChange` action or null for no action.', this.get('onChange') !== undefined);
-    this.notifyValidityChange();
+
+    let { value, errors } = this.getProperties('value', 'errors');
+    let { _prevValue, _prevErrors } = this.getProperties('_prevValue', '_prevErrors');
+    if (value !== _prevValue || errors !== _prevErrors) {
+      this.notifyValidityChange();
+    }
+    this._prevValue = value;
+    this._prevErrors = errors;
   },
 
   didInsertElement() {
@@ -160,6 +167,7 @@ export default Component.extend(FocusableMixin, ColorMixin, ChildMixin, Validati
     },
 
     handleBlur(e) {
+
       this.sendAction('onBlur', e);
       this.set('isTouched', true);
       this.notifyValidityChange();

diff --git a/tests/integration/components/paper-form-test.js b/tests/integration/components/paper-form-test.js
@@ -1,7 +1,7 @@
 import Component from '@ember/component';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, triggerEvent, click } from '@ember/test-helpers';
+import { render, triggerEvent, click, blur } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 module('Integration | Component | paper form', function(hooks) {
@@ -110,7 +110,8 @@ module('Integration | Component | paper form', function(hooks) {
       assert.notOk(isInvalidAndTouched);
     });
 
-    this.$('input:first').trigger('blur');
+    await click('input:first-of-type');
+    await blur('input:first-of-type');
 
     this.set('onValidityChange', (isValid, isTouched, isInvalidAndTouched) => {
       assert.notOk(isValid);