fix: fix ArrayField focus

aws-amplify · Sep 22, 2022 · 5c93079 · 5c93079
1 parent 2d7d1d3
commit 5c93079
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 19 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
@@ -695,6 +695,11 @@ function ArrayField({
   const { tokens } = useTheme();
   const [selectedBadgeIndex, setSelectedBadgeIndex] = React.useState();
   const [isEditing, setIsEditing] = React.useState();
+  React.useEffect(() => {
+    if (isEditing) {
+      inputFieldRef?.current?.focus();
+    }
+  }, [isEditing]);
   const removeItem = async (removeIndex) => {
     const newItems = items.filter((value, index) => index !== removeIndex);
     await onChange(newItems);
@@ -770,7 +775,6 @@ function ArrayField({
                   setSelectedBadgeIndex(index);
                   setFieldValue(items[index]);
                   setIsEditing(true);
-                  inputFieldRef?.current?.focus();
                 }}
               >
                 {value}
@@ -1027,6 +1031,11 @@ function ArrayField({
   const { tokens } = useTheme();
   const [selectedBadgeIndex, setSelectedBadgeIndex] = React.useState();
   const [isEditing, setIsEditing] = React.useState();
+  React.useEffect(() => {
+    if (isEditing) {
+      inputFieldRef?.current?.focus();
+    }
+  }, [isEditing]);
   const removeItem = async (removeIndex) => {
     const newItems = items.filter((value, index) => index !== removeIndex);
     await onChange(newItems);
@@ -1102,7 +1111,6 @@ function ArrayField({
                   setSelectedBadgeIndex(index);
                   setFieldValue(items[index]);
                   setIsEditing(true);
-                  inputFieldRef?.current?.focus();
                 }}
               >
                 {value}
@@ -2834,6 +2842,11 @@ function ArrayField({
   const { tokens } = useTheme();
   const [selectedBadgeIndex, setSelectedBadgeIndex] = React.useState();
   const [isEditing, setIsEditing] = React.useState();
+  React.useEffect(() => {
+    if (isEditing) {
+      inputFieldRef?.current?.focus();
+    }
+  }, [isEditing]);
   const removeItem = async (removeIndex) => {
     const newItems = items.filter((value, index) => index !== removeIndex);
     await onChange(newItems);
@@ -2909,7 +2922,6 @@ function ArrayField({
                   setSelectedBadgeIndex(index);
                   setFieldValue(items[index]);
                   setIsEditing(true);
-                  inputFieldRef?.current?.focus();
                 }}
               >
                 {value}
@@ -3487,6 +3499,11 @@ function ArrayField({
   const { tokens } = useTheme();
   const [selectedBadgeIndex, setSelectedBadgeIndex] = React.useState();
   const [isEditing, setIsEditing] = React.useState();
+  React.useEffect(() => {
+    if (isEditing) {
+      inputFieldRef?.current?.focus();
+    }
+  }, [isEditing]);
   const removeItem = async (removeIndex) => {
     const newItems = items.filter((value, index) => index !== removeIndex);
     await onChange(newItems);
@@ -3562,7 +3579,6 @@ function ArrayField({
                   setSelectedBadgeIndex(index);
                   setFieldValue(items[index]);
                   setIsEditing(true);
-                  inputFieldRef?.current?.focus();
                 }}
               >
                 {value}

diff --git a/packages/codegen-ui-react/lib/utils/forms/array-field-component.ts b/packages/codegen-ui-react/lib/utils/forms/array-field-component.ts
@@ -21,6 +21,7 @@ import {
   getCurrentValueName,
   getSetNameIdentifier,
 } from '../../forms/form-state';
+import { addUseEffectWrapper } from '../generate-react-hooks';
 
 export const generateArrayFieldComponent = () => {
   const iconPath = 'M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z';
@@ -100,6 +101,38 @@ export const generateArrayFieldComponent = () => {
         NodeFlags.Const,
       ),
     ),
+
+    addUseEffectWrapper(
+      [
+        factory.createIfStatement(
+          factory.createIdentifier('isEditing'),
+          factory.createBlock(
+            [
+              factory.createExpressionStatement(
+                factory.createCallChain(
+                  factory.createPropertyAccessChain(
+                    factory.createPropertyAccessChain(
+                      factory.createIdentifier('inputFieldRef'),
+                      factory.createToken(SyntaxKind.QuestionDotToken),
+                      factory.createIdentifier('current'),
+                    ),
+                    factory.createToken(SyntaxKind.QuestionDotToken),
+                    factory.createIdentifier('focus'),
+                  ),
+                  undefined,
+                  undefined,
+                  [],
+                ),
+              ),
+            ],
+            true,
+          ),
+          undefined,
+        ),
+      ],
+      ['isEditing'],
+    ),
+
     factory.createVariableStatement(
       undefined,
       factory.createVariableDeclarationList(
@@ -709,21 +742,6 @@ export const generateArrayFieldComponent = () => {
                                                         [factory.createTrue()],
                                                       ),
                                                     ),
-                                                    factory.createExpressionStatement(
-                                                      factory.createCallExpression(
-                                                        factory.createPropertyAccessChain(
-                                                          factory.createPropertyAccessChain(
-                                                            factory.createIdentifier('inputFieldRef'),
-                                                            factory.createToken(SyntaxKind.QuestionDotToken),
-                                                            factory.createIdentifier('current'),
-                                                          ),
-                                                          factory.createToken(SyntaxKind.QuestionDotToken),
-                                                          factory.createIdentifier('focus'),
-                                                        ),
-                                                        undefined,
-                                                        [],
-                                                      ),
-                                                    ),
                                                   ],
                                                   true,
                                                 ),