Validate Before Displaying Errors

When we show error messages because of a blur event we can sometimes
show messages that aren't valid for the current state. By running the
validator we ensure this doesn't happen.

The blur event that displays the validator only needs to fire when focus
leaves the element the first time, on subsequent focusout we'd be doing
extra validation work. Adding the once option here causes the event to
be removed as soon as it is called, which is nice because it's one less
thing.

Author: jrjohnson

packages/frontend/tests/integration/components/curriculum-inventory/report-header-test.gjs

@@ -107,4 +107,26 @@ module('Integration | Component | curriculum-inventory/report-header', function
     );
     await component.finalize();
   });
+
+  test('#i6159 validation status', async function (assert) {
+    this.set('report', this.report);
+    await render(
+      <template>
+        <ReportHeader @report={{this.report}} @canUpdate={{true}} @finalize={{(noop)}} />
+      </template>,
+    );
+    assert.ok(component.name.isVisible);
+    assert.strictEqual(component.name.value, 'Report name');
+    await component.name.edit();
+    await component.name.set('');
+    await component.name.save();
+    assert.ok(component.name.hasError);
+    await component.name.cancel();
+    assert.strictEqual(component.name.value, 'Report name');
+    await component.name.edit();
+    assert.notOk(component.name.hasError);
+    assert.strictEqual(component.name.inputValue, 'Report name');
+    await component.name.blur();
+    assert.notOk(component.name.hasError);
+  });
 });

packages/frontend/tests/pages/components/curriculum-inventory/report-header.js

@@ -1,12 +1,14 @@
 import {
   attribute,
+  blurrable,
   clickable,
   create,
   fillable,
   isPresent,
   isVisible,
   property,
   text,
+  value,
 } from 'ember-cli-page-object';
 
 const definition = {
@@ -22,6 +24,8 @@ const definition = {
     save: clickable('.done'),
     cancel: clickable('.cancel'),
     hasError: isPresent('[data-test-name-validation-error-message]'),
+    inputValue: value('input'),
+    blur: blurrable('input'),
   },
   downloadLink: {
     scope: '[data-test-download]',

packages/ilios-common/addon-test-support/ilios-common/page-objects/components/course/header.js

@@ -1,4 +1,12 @@
-import { create, clickable, fillable, text, isVisible } from 'ember-cli-page-object';
+import {
+  blurrable,
+  create,
+  clickable,
+  fillable,
+  text,
+  isVisible,
+  value,
+} from 'ember-cli-page-object';
 import publicationMenu from './publication-menu';
 import publicationStatus from '../publication-status';
 const definition = {
@@ -10,6 +18,8 @@ const definition = {
     set: fillable('input'),
     save: clickable('.done'),
     cancel: clickable('.cancel'),
+    inputValue: value('input'),
+    blur: blurrable('input'),
     hasError: isVisible('.validation-error-message'),
   },
   academicYear: text('[data-test-academic-year]'),

packages/ilios-common/addon/classes/yup-validations.js

@@ -128,9 +128,10 @@ export default class YupValidations {
     element.addEventListener(
       'focusout',
       () => {
+        this.#validate();
         this.makeErrorsVisibleFor.perform([field]);
       },
-      { passive: true },
+      { passive: true, once: true },
     );
     element.addEventListener(
       'input',

packages/test-app/tests/integration/components/course/header-test.gjs

@@ -147,4 +147,25 @@ module('Integration | Component | course/header', function (hooks) {
     await render(<template><Header @course={{this.course}} @editable={{true}} /></template>);
     assert.strictEqual(component.academicYear, '2021 - 2022');
   });
+
+  test('#i6159 validation status', async function (assert) {
+    const course = this.server.create('course');
+    const courseModel = await this.store.findRecord('course', course.id);
+    this.set('course', courseModel);
+    await render(<template><Header @course={{this.course}} @editable={{true}} /></template>);
+
+    assert.ok(component.title.isVisible);
+    assert.strictEqual(component.title.value, 'course 0');
+    await component.title.edit();
+    await component.title.set('');
+    await component.title.save();
+    assert.ok(component.title.hasError);
+    await component.title.cancel();
+    assert.strictEqual(component.title.value, 'course 0');
+    await component.title.edit();
+    assert.notOk(component.title.hasError);
+    assert.strictEqual(component.title.inputValue, 'course 0');
+    await component.title.blur();
+    assert.notOk(component.title.hasError);
+  });
 });