From f5e94fc108e85f41eb131d835ce9c593d0d84e22 Mon Sep 17 00:00:00 2001
From: Ethan Gardner <ethangardner@users.noreply.github.com>
Date: Wed, 5 Jun 2024 11:37:03 -0400
Subject: [PATCH] Fix bug with input field not populating previous and default
 values on the FormEdit UI (#156)

* populate defaultValue of initial and max length fields based on their data props in the InputPatternEdit.tsx UI.

* code formatting
---
 .../components/CheckboxPatternEdit.test.tsx   |  6 ++---
 .../FormEdit/components/InputPatternEdit.tsx  | 27 ++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.test.tsx b/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.test.tsx
index fa2fc6833..d34b79505 100644
--- a/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.test.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.test.tsx
@@ -1,12 +1,12 @@
 /**
  * @vitest-environment jsdom
  */
-import { expect, it } from 'vitest'
+import { expect, it } from 'vitest';
 
 it('Is a placeholder test for now', () => {
   expect(true).to.be.true;
-})
+});
 // import { describeStories } from '../../../test-helper';
 // import meta, * as stories from './CheckboxPatternEdit.stories';
 
-// describeStories(meta, stories);
\ No newline at end of file
+// describeStories(meta, stories);
diff --git a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
index 2a77ed099..135a42368 100644
--- a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
@@ -42,6 +42,13 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   const label = getFieldState('label');
   const maxLength = getFieldState('maxLength');
 
+  const maxLengthAttributes =
+    pattern.data.maxLength > 0
+      ? {
+          defaultValue: pattern.data.maxLength,
+        }
+      : {};
+
   return (
     <div className="grid-row grid-gap-1">
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
@@ -68,7 +75,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
+      <div className="tablet:grid-col-6 mobile-lg:grid-col-12 ohio">
         <label
           className={classnames('usa-label', {
             'usa-label--error': initial.error,
@@ -85,6 +92,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
             className="usa-input bg-primary-lighter text-bold"
             id={fieldId('initial')}
             type="text"
+            defaultValue={pattern.data.initial}
             {...register('initial')}
           ></input>
         </label>
@@ -105,6 +113,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           <input
             className="usa-input bg-primary-lighter text-bold"
             id={fieldId('maxLength')}
+            {...maxLengthAttributes}
             type="text"
             {...register('maxLength')}
           ></input>
@@ -113,14 +122,14 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
       <div className="grid-col-12">
         <PatternEditActions>
           <span className="usa-checkbox">
-              <input
-                style={{ display: 'inline-block' }}
-                className="usa-checkbox__input bg-primary-lighter"
-                type="checkbox"
-                id={fieldId('required')}
-                {...register('required')}
-                defaultChecked={pattern.data.required}
-              />
+            <input
+              style={{ display: 'inline-block' }}
+              className="usa-checkbox__input bg-primary-lighter"
+              type="checkbox"
+              id={fieldId('required')}
+              {...register('required')}
+              defaultChecked={pattern.data.required}
+            />
             <label
               style={{ display: 'inline-block' }}
               className="usa-checkbox__label"