Simplify validation state auto-tracking to just consume the value instead of listening to events

Author: simonihmig

packages/ember-bootstrap-constraint-validations/src/components/bs-form/element.js

@@ -1,6 +1,4 @@
 import BaseBsFormElement from 'ember-bootstrap/components/bs-form/element';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
 import { assert } from '@ember/debug';
 
 export default class BsFormElement extends BaseBsFormElement {
@@ -19,11 +17,10 @@ export default class BsFormElement extends BaseBsFormElement {
     return document.getElementById(this.formElementId);
   }
 
-  @tracked
-  _invalidateErrors = 0;
-
   get errors() {
-    let { controlElement, _invalidateErrors } = this;
+    // native validation state doesn't integrate with Ember's autotracking, so we need to invalidate our `errors` getter explicitly when
+    // `this.value` changes by consuming it here.
+    let { controlElement, value } = this;
     return !controlElement || controlElement.validity.valid
       ? []
       : [controlElement.validationMessage];
@@ -32,17 +29,4 @@ export default class BsFormElement extends BaseBsFormElement {
   get hasValidator() {
     return true;
   }
-
-  @action
-  showValidationOnHandler(event) {
-    // native validation state doesn't integrate with Ember's autotracking, so we need to invalidate our `errors` getter explicitly when an
-    // event occurs that could change the validation state
-
-    if (event.type !== 'focusout') {
-      // ignore focusout event, as this won't be able to change the validation state, but mutating _invalidateErrors can cause "same computation" assertions
-      this._invalidateErrors++;
-    }
-
-    super.showValidationOnHandler(event);
-  }
 }

packages/test-app/tests/integration/components/bs-form-test.js

@@ -153,7 +153,35 @@ module('Integration | Component | bs-form', function (hooks) {
     await blur('input');
     assert
       .dom('input')
-      .hasClass('is-valid', 'validation error is shown after focus out');
+      .hasClass('is-valid', 'validation success is shown after focus out');
+  });
+
+  test('validation state is updated while typing', async function (assert) {
+    this.set('model', { name: '' });
+
+    await render(hbs`
+      <BsForm @model={{this.model}} as |form|>
+        <form.element @controlType="email" @label="Name" @property="name" as |el|>
+          <el.control required/>
+        </form.element>
+      </BsForm>
+    `);
+    assert.dom('input').doesNotHaveClass('is-valid');
+
+    await focus('input');
+    await blur('input');
+
+    await fillIn('input', 'abc');
+
+    assert
+      .dom('input')
+      .hasClass('is-invalid', 'validation error is shown after focus out');
+
+    await fillIn('input', 'abc@example.com');
+
+    assert
+      .dom('input')
+      .hasClass('is-valid', 'validation success is shown after focus out');
   });
 
   test('does not throw when control element is not available', async function (assert) {