Add `@validateOn="input", rename "blur" to "focusout"

ember-headless-form/src/components/-private/field.ts

@@ -44,8 +44,8 @@ export interface HeadlessFormFieldComponentSignature<
     registerField: RegisterFieldCallback<FormData<DATA>, KEY>;
     unregisterField: UnregisterFieldCallback<FormData<DATA>, KEY>;
     triggerValidationFor(name: KEY): Promise<void>;
-    fieldValidationEvent: 'focusout' | 'change' | undefined;
-    fieldRevalidationEvent: 'focusout' | 'change' | undefined;
+    fieldValidationEvent: 'focusout' | 'change' | 'input' | undefined;
+    fieldRevalidationEvent: 'focusout' | 'change' | 'input' | undefined;
   };
   Blocks: {
     default: [

ember-headless-form/src/components/headless-form.ts

@@ -28,7 +28,7 @@ import type {
   WithBoundArgs,
 } from '@glint/template';
 
-type ValidateOn = 'change' | 'blur' | 'submit';
+type ValidateOn = 'change' | 'focusout' | 'submit' | 'input';
 
 export interface HeadlessFormComponentSignature<DATA extends UserData> {
   Element: HTMLFormElement;
@@ -127,34 +127,29 @@ export default class HeadlessFormComponent<
   /**
    * Return the event type that will be listened on for dynamic validation (i.e. *before* submitting)
    */
-  get fieldValidationEvent(): 'focusout' | 'change' | undefined {
+  get fieldValidationEvent(): 'focusout' | 'change' | 'input' | undefined {
     const { validateOn } = this;
 
     return validateOn === 'submit'
       ? // no need for dynamic validation, as validation always happens on submit
         undefined
-      : // our component API expects "blur", but the actual blur event does not bubble up, so we use focusout internally instead
-      validateOn === 'blur'
-      ? 'focusout'
       : validateOn;
   }
 
   /**
    * Return the event type that will be listened on for dynamic *re*validation, i.e. updating the validation status of a field that has been previously marked as invalid
    */
-  get fieldRevalidationEvent(): 'focusout' | 'change' | undefined {
+  get fieldRevalidationEvent(): 'focusout' | 'change' | 'input' | undefined {
     const { validateOn, revalidateOn } = this;
 
     return revalidateOn === 'submit'
       ? // no need for dynamic validation, as validation always happens on submit
         undefined
       : // when validation happens more frequently than revalidation, then we can ignore revalidation, because the validation handler will already cover us
-      validateOn === 'change' ||
-        (validateOn === 'blur' && revalidateOn === 'blur')
+      validateOn === 'input' ||
+        (validateOn === 'change' && revalidateOn === 'focusout') ||
+        validateOn === revalidateOn
       ? undefined
-      : // our component API expects "blur", but the actual blur event does not bubble up, so we use focusout internally instead
-      revalidateOn === 'blur'
-      ? 'focusout'
       : revalidateOn;
   }
 

test-app/app/templates/index.hbs

@@ -1,6 +1,7 @@
 <HeadlessForm
   @data={{this.data}}
-  @validateOn='blur'
+  @validateOn='focusout'
+  @revalidateOn='input'
   @onSubmit={{this.doSomething}}
   as |form|
 >

test-app/tests/helpers/dom.ts

@@ -0,0 +1,24 @@
+import { find, triggerEvent } from '@ember/test-helpers';
+
+/**
+ * Fill the provided text into the `value` property of the selected form element, similar to `fillIn`, but *without* implicitly triggering a `change` event.
+ * This mimics the behavior of a user typing data into an input without yet focusing out of it. Browsers will only trigger a `change` event when focusing
+ * out of the element, not while typing!
+ *
+ * `fillIn` will basically simulate entering the data *and* kinda focusing out (as it triggers `change`, however not `focusout`, which is impossible to achieve as a real user),
+ * while this helper does only the former.
+ */
+export async function input(selector: string, value: string): Promise<void> {
+  const el = find(selector);
+
+  if (!el) {
+    throw new Error(`No element found for selector ${selector}`);
+  }
+
+  if (!(el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement)) {
+    throw new Error(`Invalid element for \`input\` helper.`);
+  }
+
+  el.value = value;
+  await triggerEvent(el, 'input');
+}

test-app/tests/integration/components/headless-form-custom-controls-test.gts

@@ -223,7 +223,7 @@ module(
       });
 
       module('captureEvents', function () {
-        test('captures blur events triggering validation without controls having name matching field name when @validateOn="blur"', async function (assert) {
+        test('captures blur events triggering validation without controls having name matching field name when @validateOn="focusout"', async function (assert) {
           const data: TestFormData = { custom: 'foo' };
           const validateCallback = sinon.fake.returns([
             {
@@ -234,7 +234,7 @@ module(
           ]);
 
           await render(<template>
-            <HeadlessForm @data={{data}} @validateOn="blur" as |form|>
+            <HeadlessForm @data={{data}} @validateOn="focusout" as |form|>
               <form.field
                 @name="custom"
                 @validate={{validateCallback}}
@@ -315,7 +315,7 @@ module(
         });
       });
 
-      test('captures blur/change events triggering re-/validation without controls having name matching field name when @validateOn="blur" and @revalidateOn="change"', async function (assert) {
+      test('captures blur/change events triggering re-/validation without controls having name matching field name when @validateOn="focusout" and @revalidateOn="change"', async function (assert) {
         const data: TestFormData = { custom: 'foo' };
         const validateCallback = sinon.fake.returns([
           { type: 'invalid-date', value: undefined, message: 'Invalid Date!' },
@@ -324,7 +324,7 @@ module(
         await render(<template>
           <HeadlessForm
             @data={{data}}
-            @validateOn="blur"
+            @validateOn="focusout"
             @revalidateOn="change"
             as |form|
           >