diff --git a/src/@episerver/forms-react/src/components/FormBody.tsx b/src/@episerver/forms-react/src/components/FormBody.tsx index 6ae01fa..ed6333f 100644 --- 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 index 67eb834..f49ed5e 100644 --- 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 ?? ""; + } } \ No newline at end of file diff --git a/src/@episerver/forms-sdk/src/models/FormContainer.ts b/src/@episerver/forms-sdk/src/models/FormContainer.ts index 60c8c89..d747989 100644 --- 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 {