fix: forms checkbox to reflect correct model state (#738)

Co-authored-by: Scott Young <scoyou@amazon.com>
aws-amplify · Nov 3, 2022 · db310d7 · db310d7
1 parent cf3d16a
commit db310d7
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 10 deletions.
diff --git a/...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap b/...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
@@ -4978,7 +4978,7 @@ export default function InputGalleryCreateForm(props) {
     rootbeer: undefined,
     attend: undefined,
     maybeSlide: false,
-    maybeCheck: undefined,
+    maybeCheck: false,
     arrayTypeField: [],
     timestamp: undefined,
     ippy: undefined,
@@ -5250,7 +5250,7 @@ export default function InputGalleryCreateForm(props) {
         name=\\"maybeCheck\\"
         value=\\"maybeCheck\\"
         isDisabled={false}
-        defaultChecked={false}
+        checked={maybeCheck}
         onChange={(e) => {
           let value = e.target.checked;
           if (onChange) {
@@ -5696,7 +5696,7 @@ export default function InputGalleryUpdateForm(props) {
     rootbeer: undefined,
     attend: undefined,
     maybeSlide: false,
-    maybeCheck: undefined,
+    maybeCheck: false,
     arrayTypeField: [],
     timestamp: undefined,
     ippy: undefined,
@@ -6009,7 +6009,7 @@ export default function InputGalleryUpdateForm(props) {
         name=\\"maybeCheck\\"
         value=\\"maybeCheck\\"
         isDisabled={false}
-        defaultChecked={false}
+        checked={maybeCheck}
         defaultValue={maybeCheck}
         onChange={(e) => {
           let value = e.target.checked;

diff --git a/packages/codegen-ui-react/lib/forms/component-helper.ts b/packages/codegen-ui-react/lib/forms/component-helper.ts
@@ -99,6 +99,10 @@ export const renderValueAttribute = ({
       factory.createIdentifier('isChecked'),
       factory.createJsxExpression(undefined, valueIdentifier),
     ),
+    CheckboxField: factory.createJsxAttribute(
+      factory.createIdentifier('checked'),
+      factory.createJsxExpression(undefined, valueIdentifier),
+    ),
   };
 
   if (controlledComponentToAttributesMap[componentType]) {

diff --git a/packages/codegen-ui-react/lib/forms/form-state.ts b/packages/codegen-ui-react/lib/forms/form-state.ts
@@ -106,6 +106,7 @@ export const getDefaultValueExpression = (
     SwitchField: factory.createFalse(),
     StepperField: factory.createNumericLiteral(0),
     SliderField: factory.createNumericLiteral(0),
+    CheckboxField: factory.createFalse(),
   };
 
   // it's a nonModel or relationship object

diff --git a/packages/codegen-ui-react/lib/workflow/mutation.ts b/packages/codegen-ui-react/lib/workflow/mutation.ts
@@ -53,7 +53,6 @@ const genericEventToReactEventImplementationOverrides: PrimitiveLevelPropConfigu
 
 const PrimitiveDefaultValuePropMapping: PrimitiveLevelPropConfiguration<string> = new Proxy(
   {
-    [Primitive.CheckboxField]: { checked: 'defaultChecked' },
     [Primitive.SwitchField]: { isChecked: 'defaultChecked' },
   },
   {

diff --git a/packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/form-field.test.ts b/packages/codegen-ui/lib/__tests__/generate-form-definition/helpers/form-field.test.ts
@@ -469,13 +469,12 @@ describe('getFormDefinitionInputElement', () => {
     const config = {
       inputType: {
         type: 'CheckboxField',
-        defaultChecked: true,
       },
     };
 
     expect(getFormDefinitionInputElement(config)).toStrictEqual({
       componentType: 'CheckboxField',
-      props: { label: 'Label', name: 'fieldName', value: 'fieldName', defaultChecked: true },
+      props: { label: 'Label', name: 'fieldName', value: 'fieldName' },
     });
   });
 

diff --git a/packages/codegen-ui/lib/generate-form-definition/helpers/form-field.ts b/packages/codegen-ui/lib/generate-form-definition/helpers/form-field.ts
@@ -282,8 +282,6 @@ export function getFormDefinitionInputElement(
           value:
             config.inputType?.value || baseConfig?.inputType?.value || FORM_DEFINITION_DEFAULTS.field.inputType.value,
           isDisabled: getFirstDefinedValue([config.inputType?.readOnly, baseConfig?.inputType?.readOnly]),
-          defaultChecked:
-            getFirstDefinedValue([config.inputType?.defaultChecked, baseConfig?.inputType?.defaultChecked]) || false,
         },
       };
       break;

diff --git a/packages/codegen-ui/lib/types/form/form-definition-element.ts b/packages/codegen-ui/lib/types/form/form-definition-element.ts
@@ -127,7 +127,7 @@ export type FormDefinitionToggleButtonElement = {
 
 export type FormDefinitionCheckboxFieldElement = {
   componentType: 'CheckboxField';
-  props: { label: string; value: string; name: string; isDisabled?: boolean; defaultChecked?: boolean };
+  props: { label: string; value: string; name: string; isDisabled?: boolean };
 };
 
 export type FormDefinitionRadioGroupFieldElement = {