LG-6160: Add personal key validation behavior

app/components/validated_field_component.js

@@ -1,3 +1 @@
-import { ValidatedField } from '@18f/identity-validated-field';
-
-customElements.define('lg-validated-field', ValidatedField);
+import '@18f/identity-validated-field';

app/javascript/packages/form-steps/form-steps.spec.tsx

@@ -203,6 +203,19 @@ describe('FormSteps', () => {
     });
   });
 
+  it('will submit the form by enter press in an input', async () => {
+    const onComplete = sinon.spy();
+    const { getByText, getByLabelText } = render(
+      <FormSteps steps={STEPS} onComplete={onComplete} />,
+    );
+
+    await userEvent.click(getByText('forms.buttons.continue'));
+    await userEvent.type(getByLabelText('Second Input One'), 'one');
+    await userEvent.type(getByLabelText('Second Input Two'), 'two{Enter}');
+
+    expect(getByText('Last Title')).to.be.ok();
+  });
+
   it('prompts on navigate if values have been assigned', async () => {
     const { getByText, getByLabelText } = render(<FormSteps steps={STEPS} />);
 
@@ -323,6 +336,31 @@ describe('FormSteps', () => {
     expect(document.activeElement).to.equal(getByText('Last Title'));
   });
 
+  it('respects native custom input validity', async () => {
+    const { getByRole } = render(<FormSteps steps={STEPS} />);
+
+    await userEvent.click(getByRole('button', { name: 'forms.buttons.continue' }));
+    const inputOne = getByRole('textbox', { name: 'Second Input One' }) as HTMLInputElement;
+    const inputTwo = getByRole('textbox', { name: 'Second Input Two' }) as HTMLInputElement;
+
+    // Make inputs otherwise valid.
+    await userEvent.type(inputOne, 'one');
+    await userEvent.type(inputTwo, 'two');
+
+    // Add custom validity error.
+    const checkValidity = () => {
+      inputOne.setCustomValidity('Custom Error');
+      return false;
+    };
+    inputOne.reportValidity = checkValidity;
+    inputOne.checkValidity = checkValidity;
+
+    await userEvent.click(getByRole('button', { name: 'forms.buttons.continue' }));
+
+    expect(inputOne.hasAttribute('data-is-error')).to.be.true();
+    expect(document.activeElement).to.equal(inputOne);
+  });
+
   it('distinguishes empty errors from progressive error removal', async () => {
     const { getByText, getByLabelText, container } = render(<FormSteps steps={STEPS} />);
 
@@ -340,6 +378,9 @@ describe('FormSteps', () => {
     const { getByLabelText, getByText, getByRole } = render(
       <FormSteps
         steps={steps}
+        initialValues={{
+          secondInputTwo: 'two',
+        }}
         initialActiveErrors={[
           {
             field: 'unknown',
@@ -349,26 +390,30 @@ describe('FormSteps', () => {
             field: 'secondInputOne',
             error: new FormError(),
           },
+          {
+            field: 'secondInputTwo',
+            error: new FormError(),
+          },
         ]}
         onComplete={onComplete}
       />,
     );
 
-    // Field associated errors are handled by the field. There should only be one.
+    // Field associated errors are handled by the field.
     const inputOne = getByLabelText('Second Input One');
     const inputTwo = getByLabelText('Second Input Two');
     expect(inputOne.matches('[data-is-error]')).to.be.true();
-    expect(inputTwo.matches('[data-is-error]')).to.be.false();
+    expect(inputTwo.matches('[data-is-error]')).to.be.true();
 
     // Attempting to submit without adjusting field value does not submit and shows error.
     await userEvent.click(getByText('forms.buttons.submit.default'));
     expect(onComplete.called).to.be.false();
     await waitFor(() => expect(document.activeElement).to.equal(inputOne));
 
-    // Changing the value for the field should unset the error.
+    // Changing the value for the first field should unset the first error.
     await userEvent.type(inputOne, 'one');
     expect(inputOne.matches('[data-is-error]')).to.be.false();
-    expect(inputTwo.matches('[data-is-error]')).to.be.false();
+    expect(inputTwo.matches('[data-is-error]')).to.be.true();
 
     // Default required validation should still happen and take the place of any unknown errors.
     await userEvent.click(getByText('forms.buttons.submit.default'));
@@ -378,7 +423,7 @@ describe('FormSteps', () => {
     expect(inputTwo.matches('[data-is-error]')).to.be.true();
     expect(() => getByRole('alert')).to.throw();
 
-    // Changing the value for the field should unset the error.
+    // Changing the value for the second field should unset the second error.
     await userEvent.type(inputTwo, 'two');
     expect(inputOne.matches('[data-is-error]')).to.be.false();
     expect(inputTwo.matches('[data-is-error]')).to.be.false();

app/javascript/packages/form-steps/form-steps.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import type { RefCallback, FormEventHandler, FC } from 'react';
+import type { FormEventHandler, RefCallback, FC } from 'react';
 import { Alert } from '@18f/identity-components';
 import { useDidUpdateEffect, useIfStillMounted } from '@18f/identity-react-hooks';
 import RequiredValueMissingError from './required-value-missing-error';
@@ -30,7 +30,7 @@ interface FormStepRegisterFieldOptions {
 export type RegisterFieldCallback = (
   field: string,
   options?: Partial<FormStepRegisterFieldOptions>,
-) => undefined | RefCallback<HTMLElement>;
+) => undefined | RefCallback<HTMLInputElement>;
 
 export type OnErrorCallback = (error: Error, options?: { field?: string | null }) => void;
 
@@ -87,7 +87,7 @@ interface FieldsRefEntry {
   /**
    * Ref callback.
    */
-  refCallback: RefCallback<HTMLElement>;
+  refCallback: RefCallback<HTMLInputElement>;
 
   /**
    * Whether field is required.
@@ -97,7 +97,7 @@ interface FieldsRefEntry {
   /**
    * Element assigned by ref callback.
    */
-  element: HTMLElement | null;
+  element: HTMLInputElement | null;
 }
 
 interface FormStepsProps {
@@ -195,7 +195,11 @@ function FormSteps({
   const ifStillMounted = useIfStillMounted();
   useEffect(() => {
     if (activeErrors.length && didSubmitWithErrors.current) {
-      getFieldActiveErrorFieldElement(activeErrors, fields.current)?.focus();
+      const activeErrorFieldElement = getFieldActiveErrorFieldElement(activeErrors, fields.current);
+      if (activeErrorFieldElement) {
+        activeErrorFieldElement.reportValidity();
+        activeErrorFieldElement.focus();
+      }
     }
 
     didSubmitWithErrors.current = false;
@@ -242,8 +246,19 @@ function FormSteps({
       const { element, isRequired } = fields.current[key];
       const isActive = !!element;
 
-      if (isActive && isRequired && !values[key]) {
-        result = result.concat({ field: key, error: new RequiredValueMissingError() });
+      let error: Error | undefined;
+      if (isActive) {
+        element.checkValidity();
+
+        if (element.validationMessage) {
+          error = new Error(element.validationMessage);
+        } else if (isRequired && !values[key]) {
+          error = new RequiredValueMissingError();
+        }
+      }
+
+      if (error) {
+        result = result.concat({ field: key, error });
       }
 
       return result;
@@ -275,8 +290,8 @@ function FormSteps({
 
     const nextActiveErrors = getValidationErrors();
     setActiveErrors(nextActiveErrors);
-    didSubmitWithErrors.current = true;
     if (nextActiveErrors.length) {
+      didSubmitWithErrors.current = true;
       return;
     }
 
@@ -300,7 +315,7 @@ function FormSteps({
   const isLastStep = stepIndex + 1 === steps.length;
 
   return (
-    <form ref={formRef} onSubmit={toNextStep}>
+    <form ref={formRef} onSubmit={toNextStep} noValidate>
       {promptOnNavigate && Object.keys(values).length > 0 && <PromptOnNavigate />}
       {stepErrors.map((error) => (
         <Alert key={error.message} type="error" className="margin-bottom-4">

app/javascript/packages/validated-field/index.ts

@@ -0,0 +1,5 @@
+import './validated-field-element';
+
+export { default as ValidatedField } from './validated-field';
+
+export type { ValidatedFieldValidator } from './validated-field';

app/javascript/packages/validated-field/package.json

@@ -1,5 +1,13 @@
 {
   "name": "@18f/identity-validated-field",
   "private": true,
-  "version": "1.0.0"
+  "version": "1.0.0",
+  "peerDependencies": {
+    "react": "^17.0.2"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  }
 }

app/javascript/packages/validated-field/index.spec.js → app/javascript/packages/validated-field/validated-field-element.spec.ts

@@ -1,13 +1,9 @@
 import sinon from 'sinon';
 import { getByRole, getByText } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
-import { ValidatedField } from '.';
-
-describe('ValidatedField', () => {
-  before(() => {
-    customElements.define('lg-validated-field', ValidatedField);
-  });
+import './validated-field-element';
 
+describe('ValidatedFieldElement', () => {
   let idCounter = 0;
 
   function createAndConnectElement({ hasInitialError = false } = {}) {
@@ -45,11 +41,9 @@ describe('ValidatedField', () => {
   it('shows error state and focuses on form validation', () => {
     const element = createAndConnectElement();
 
-    /** @type {HTMLInputElement} */
-    const input = getByRole(element, 'textbox');
+    const input = getByRole(element, 'textbox') as HTMLInputElement;
 
-    /** @type {HTMLFormElement} */
-    const form = element.parentNode;
+    const form = element.parentNode as HTMLFormElement;
     form.checkValidity();
 
     expect(input.classList.contains('usa-input--error')).to.be.true();
@@ -63,13 +57,11 @@ describe('ValidatedField', () => {
   it('shows custom validity as message content', () => {
     const element = createAndConnectElement();
 
-    /** @type {HTMLInputElement} */
-    const input = getByRole(element, 'textbox');
+    const input = getByRole(element, 'textbox') as HTMLInputElement;
     input.value = 'a';
     input.setCustomValidity('custom validity');
 
-    /** @type {HTMLFormElement} */
-    const form = element.parentNode;
+    const form = element.parentNode as HTMLFormElement;
     form.checkValidity();
 
     expect(getByText(element, 'custom validity')).to.be.ok();
@@ -78,11 +70,9 @@ describe('ValidatedField', () => {
   it('clears existing validation state on input', async () => {
     const element = createAndConnectElement();
 
-    /** @type {HTMLInputElement} */
-    const input = getByRole(element, 'textbox');
+    const input = getByRole(element, 'textbox') as HTMLInputElement;
 
-    /** @type {HTMLFormElement} */
-    const form = element.parentNode;
+    const form = element.parentNode as HTMLFormElement;
     form.checkValidity();
 
     await userEvent.type(input, '5');
@@ -96,11 +86,9 @@ describe('ValidatedField', () => {
     const firstElement = createAndConnectElement();
     createAndConnectElement();
 
-    /** @type {HTMLInputElement} */
-    const firstInput = getByRole(firstElement, 'textbox');
+    const firstInput = getByRole(firstElement, 'textbox') as HTMLInputElement;
 
-    /** @type {HTMLFormElement} */
-    const form = document.querySelector('form');
+    const form = document.querySelector('form') as HTMLFormElement;
 
     form.checkValidity();
 
@@ -111,11 +99,9 @@ describe('ValidatedField', () => {
     it('clears existing validation state on input', async () => {
       const element = createAndConnectElement();
 
-      /** @type {HTMLInputElement} */
-      const input = getByRole(element, 'textbox');
+      const input = getByRole(element, 'textbox') as HTMLInputElement;
 
-      /** @type {HTMLFormElement} */
-      const form = element.parentNode;
+      const form = element.parentNode as HTMLFormElement;
       form.checkValidity();
 
       await userEvent.type(input, '5');
@@ -131,12 +117,10 @@ describe('ValidatedField', () => {
       const inputWidth = 280;
       const element = createAndConnectElement();
 
-      /** @type {HTMLInputElement} */
-      const input = getByRole(element, 'textbox');
+      const input = getByRole(element, 'textbox') as HTMLInputElement;
       sinon.stub(input, 'offsetWidth').value(inputWidth);
 
-      /** @type {HTMLFormElement} */
-      const form = element.parentNode;
+      const form = element.parentNode as HTMLFormElement;
       form.checkValidity();
 
       const message = getByText(element, 'This field is required');
@@ -148,12 +132,10 @@ describe('ValidatedField', () => {
     it('does not set max width on error message', () => {
       const element = createAndConnectElement();
 
-      /** @type {HTMLInputElement} */
-      const input = getByRole(element, 'textbox');
+      const input = getByRole(element, 'textbox') as HTMLInputElement;
       input.type = 'checkbox';
 
-      /** @type {HTMLFormElement} */
-      const form = element.parentNode;
+      const form = element.parentNode as HTMLFormElement;
       form.checkValidity();
 
       const message = getByText(element, 'This field is required');