Merge pull request #132 from episerver/bugfix/aform-3947-initial-form…

…-focus-doesnt-work Fix InitialFormFocus doesn't work
episerver · Jun 17, 2024 · 2eeeb3b · 2eeeb3b
2 parents d66e015 + fb02fda
commit 2eeeb3b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/src/@episerver/forms-react/src/components/FormBody.tsx b/src/@episerver/forms-react/src/components/FormBody.tsx
@@ -204,6 +204,9 @@ export const FormBody = (props: FormBodyProps) => {
     //reset when change page
     useEffect(() => {
         isSuccess.current = false;
+        if (form.properties.focusOnForm || currentStepIndex > 0){            
+            dispatchFunctions.updateFocusOn(stepHelper.getFirstInputElement(currentStepIndex, inactiveElements));
+        }
     }, [currentStepIndex]);
 
     //Run in-case change page by url. The currentStepIndex that get from cache is incorrect.

diff --git a/src/@episerver/forms-sdk/src/helpers/stepHelper.ts b/src/@episerver/forms-sdk/src/helpers/stepHelper.ts
@@ -98,4 +98,16 @@ export class StepHelper {
         }
         return !isNullOrEmpty(step.properties?.dependField?.key)
     }
+
+    /**
+     * Get the first input elementKey in the list element
+     * @param stepIndex 
+     * @returns
+     */
+    getFirstInputElement(stepIndex: number, inactiveElements: string[]): string {
+        const arrInputElement = this._form.steps[stepIndex].elements.find((e) =>
+            e.contentType.indexOf("ElementBlock") > 0 && inactiveElements.indexOf(e.key) < 0
+        );
+        return arrInputElement?.key ?? "";
+    }
 }
diff --git a/src/@episerver/forms-sdk/src/models/FormContainer.ts b/src/@episerver/forms-sdk/src/models/FormContainer.ts
@@ -25,7 +25,8 @@ export interface FormContainerProperties {
     allowMultipleSubmission: boolean
     showNavigationBar : boolean
     description: string
-    metadataAttribute: string
+    metadataAttribute: string,
+    focusOnForm: boolean;
 }
 
 export interface Step {