Improve EditableField error handling (#374)

* Improve EditableField error handling

* Revert out-of-scope change

* Add test

web/app/components/editable-field.ts

@@ -1,10 +1,11 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
-import { next, schedule, scheduleOnce } from "@ember/runloop";
+import { schedule, scheduleOnce } from "@ember/runloop";
 import { assert } from "@ember/debug";
 import { guidFor } from "@ember/object/internals";
 import { HermesDocument, HermesUser } from "hermes/types/document";
+import blinkElement from "hermes/utils/blink-element";
 
 export const FOCUSABLE =
   'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
@@ -185,6 +186,7 @@ export default class EditableFieldComponent extends Component<EditableFieldCompo
    */
   @action protected disableEditing() {
     this.editingIsEnabled = false;
+    this.emptyValueErrorIsShown = false;
   }
 
   /**
@@ -255,9 +257,17 @@ export default class EditableFieldComponent extends Component<EditableFieldCompo
         (newValue instanceof Array && newValue.length === 0)
       ) {
         if (this.args.isRequired) {
+          if (this.emptyValueErrorIsShown) {
+            const error =
+              this.editingContainer?.querySelector(".hds-form-error");
+            blinkElement(error);
+            return;
+          }
+
           this.emptyValueErrorIsShown = true;
           return;
         }
+
         /**
          * We don't consider an empty value to be a change
          * if the initial value is undefined.

web/app/utils/blink-element.ts

@@ -0,0 +1,25 @@
+import Ember from "ember";
+
+/**
+ * Blinks an element twice by toggling its visibility.
+ * Used for emphasis, such as to reiterate an
+ * already-visible form error.
+ */
+const DURATION = Ember.testing ? 0 : 100;
+
+export default function blinkElement(element?: Element | null) {
+  if (!element) {
+    return;
+  }
+
+  for (let i = 0; i < 4; i++) {
+    // Alternate between hidden and visible
+    let visibility = i % 2 === 0 ? "hidden" : "visible";
+
+    setTimeout(() => {
+      if (element) {
+        element.setAttribute("style", `visibility: ${visibility}`);
+      }
+    }, i * DURATION);
+  }
+}

web/tests/integration/components/editable-field-test.ts

@@ -88,9 +88,39 @@ module("Integration | Component | editable-field", function (hooks) {
     assert.dom(ERROR).doesNotExist();
 
     await fillIn("textarea", "");
-    await triggerKeyEvent(document, "keydown", "Enter");
+    await click(SAVE_BUTTON);
 
     assert.dom(ERROR).exists();
+
+    // Cancel and try again
+
+    await click(CANCEL_BUTTON);
+
+    assert.dom(ERROR).doesNotExist();
+
+    await click(FIELD_TOGGLE);
+
+    assert.dom(ERROR).doesNotExist("the error state resets on cancel");
+
+    // Cause another error
+
+    await fillIn("textarea", "");
+    await click(SAVE_BUTTON);
+
+    assert.dom(ERROR).exists();
+
+    // Save a valid value
+
+    await fillIn("textarea", "bar");
+    await click(SAVE_BUTTON);
+
+    assert.dom(ERROR).doesNotExist();
+
+    // Reenable edit mode
+
+    await click(FIELD_TOGGLE);
+
+    assert.dom(ERROR).doesNotExist("the error state resets on save");
   });
 
   test("it conditionally determines whether to wrap the read-only value in a button", async function (this: EditableFieldComponentTestContext, assert) {

web/tests/unit/utils/blink-element-test.ts

@@ -0,0 +1,18 @@
+import { waitUntil } from "@ember/test-helpers";
+import blinkElement from "hermes/utils/blink-element";
+import { module, test } from "qunit";
+
+module("Unit | Utility | blink-element", function () {
+  test("it blinks an element", async function (assert) {
+    assert.expect(0);
+
+    const div = document.createElement("div");
+
+    blinkElement(div);
+
+    await waitUntil(() => div.style.visibility === "hidden");
+    await waitUntil(() => div.style.visibility === "visible");
+    await waitUntil(() => div.style.visibility === "hidden");
+    await waitUntil(() => div.style.visibility === "visible");
+  });
+});