From 8235f3d5d2c2f740a5e6f721d9b859ee1dcc528b Mon Sep 17 00:00:00 2001 From: Trung Nguyen Duc Date: Tue, 11 Jun 2024 08:41:31 +0700 Subject: [PATCH 1/3] Fix InitialFormFocus doesn't work Fixes: AFORM-3947 --- .../forms-react/src/components/FormBody.tsx | 3 +++ src/@episerver/forms-sdk/src/helpers/stepHelper.ts | 13 +++++++++++++ .../forms-sdk/src/models/FormContainer.ts | 3 ++- 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/@episerver/forms-react/src/components/FormBody.tsx b/src/@episerver/forms-react/src/components/FormBody.tsx index 6ae01fa..0f0e167 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){ + dispatchFunctions.updateFocusOn(stepHelper.getFirstInputElement(currentStepIndex)); + } }, [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..295b4e1 100644 --- a/src/@episerver/forms-sdk/src/helpers/stepHelper.ts +++ b/src/@episerver/forms-sdk/src/helpers/stepHelper.ts @@ -98,4 +98,17 @@ export class StepHelper { } return !isNullOrEmpty(step.properties?.dependField?.key) } + + /** + * Get the first input elementKey in the list element + * @param stepIndex + * @returns + */ + getFirstInputElement(stepIndex: number): string { + const arrInputElement = this._form.steps[stepIndex].elements.find((e) => + e.contentType.indexOf("ElementBlock") > 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 { From 90b06093bbd8d22db289f003e3b650f978cc1c7f Mon Sep 17 00:00:00 2001 From: "EP\\qang2" Date: Fri, 14 Jun 2024 18:07:44 +0700 Subject: [PATCH 2/3] Update logic so that form will focus on first element on step that bigger than 0 --- src/@episerver/forms-react/src/components/FormBody.tsx | 4 ++-- src/@episerver/forms-sdk/src/helpers/stepHelper.ts | 5 ++--- src/@episerver/forms-sdk/src/models/index.ts | 3 ++- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/@episerver/forms-react/src/components/FormBody.tsx b/src/@episerver/forms-react/src/components/FormBody.tsx index 0f0e167..ed6333f 100644 --- a/src/@episerver/forms-react/src/components/FormBody.tsx +++ b/src/@episerver/forms-react/src/components/FormBody.tsx @@ -204,8 +204,8 @@ export const FormBody = (props: FormBodyProps) => { //reset when change page useEffect(() => { isSuccess.current = false; - if (form.properties.focusOnForm){ - dispatchFunctions.updateFocusOn(stepHelper.getFirstInputElement(currentStepIndex)); + if (form.properties.focusOnForm || currentStepIndex > 0){ + dispatchFunctions.updateFocusOn(stepHelper.getFirstInputElement(currentStepIndex, inactiveElements)); } }, [currentStepIndex]); diff --git a/src/@episerver/forms-sdk/src/helpers/stepHelper.ts b/src/@episerver/forms-sdk/src/helpers/stepHelper.ts index 295b4e1..f49ed5e 100644 --- a/src/@episerver/forms-sdk/src/helpers/stepHelper.ts +++ b/src/@episerver/forms-sdk/src/helpers/stepHelper.ts @@ -104,11 +104,10 @@ export class StepHelper { * @param stepIndex * @returns */ - getFirstInputElement(stepIndex: number): string { + getFirstInputElement(stepIndex: number, inactiveElements: string[]): string { const arrInputElement = this._form.steps[stepIndex].elements.find((e) => - e.contentType.indexOf("ElementBlock") > 0 + 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/index.ts b/src/@episerver/forms-sdk/src/models/index.ts index db4bf95..282daed 100644 --- a/src/@episerver/forms-sdk/src/models/index.ts +++ b/src/@episerver/forms-sdk/src/models/index.ts @@ -5,4 +5,5 @@ export * from "./validators"; export * from "./enums"; export * from "./states"; export * from "./IdentityInfo"; -export * from "./ProblemDetail"; \ No newline at end of file +export * from "./ProblemDetail"; +export * from "./FormSubmissionData"; \ No newline at end of file From fb02fda4ae211c7be463271f32db2a9cdf675008 Mon Sep 17 00:00:00 2001 From: "EP\\qang2" Date: Mon, 17 Jun 2024 11:09:24 +0700 Subject: [PATCH 3/3] Remove unnecessary component --- src/@episerver/forms-sdk/src/models/index.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/@episerver/forms-sdk/src/models/index.ts b/src/@episerver/forms-sdk/src/models/index.ts index 282daed..db4bf95 100644 --- a/src/@episerver/forms-sdk/src/models/index.ts +++ b/src/@episerver/forms-sdk/src/models/index.ts @@ -5,5 +5,4 @@ export * from "./validators"; export * from "./enums"; export * from "./states"; export * from "./IdentityInfo"; -export * from "./ProblemDetail"; -export * from "./FormSubmissionData"; \ No newline at end of file +export * from "./ProblemDetail"; \ No newline at end of file