fix: the stepper header status in jsonforms

GovAlta · Jan 30, 2025 · 5fb34dd · 5fb34dd
1 parent afc33ce
commit 5fb34dd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/libs/jsonforms-components/src/lib/Controls/FormStepper/FormStepperControl.tsx b/libs/jsonforms-components/src/lib/Controls/FormStepper/FormStepperControl.tsx
@@ -58,6 +58,7 @@ export const FormStepperView = (props: CategorizationStepperLayoutRendererProps)
   const submitForm = submitFormFunction && submitFormFunction();
   const optionProps = (uischema.options as FormStepperOptionProps) || {};
   const [isOpen, setIsOpen] = useState(false);
+  const [isSelected, setIsSelected] = useState(false);
 
   const handleSubmit = () => {
     if (submitForm) {
@@ -75,12 +76,12 @@ export const FormStepperView = (props: CategorizationStepperLayoutRendererProps)
     <div data-testid="form-stepper-test-wrapper">
       <Visible visible={visible}>
         <div id={`${path || `goa`}-form-stepper`} className="formStepper">
-          {/* Need to force a refresh here, GoAFormStepper cant change dynamically unless completely re-rendered */}
-
           <GoAFormStepper
             testId={`form-stepper-headers-${uischema?.options?.testId}` || 'form-stepper-test'}
+            step={isSelected === false ? -1 : activeId + 1}
             key="stepper-form-stepper-wrapper"
             onChange={(step) => {
+              setIsSelected(true);
               goToPage(step - 1);
             }}
           >
@@ -133,6 +134,7 @@ export const FormStepperView = (props: CategorizationStepperLayoutRendererProps)
                     if (element) {
                       element.scrollIntoView();
                     }
+
                     goToPage(activeId - 1, activeId);
                   }}
                   testId="prev-button"

diff --git a/libs/jsonforms-components/src/lib/Controls/FormStepper/context/StepperContext.tsx b/libs/jsonforms-components/src/lib/Controls/FormStepper/context/StepperContext.tsx
@@ -51,6 +51,7 @@ const createStepperContextInitData = (
   });
 
   const activeId = props?.activeId || 0;
+  console.log(activeId);
 
   return {
     categories: categories,
@@ -82,7 +83,8 @@ export const JsonFormsStepperContextProvider = ({
         return stepperState;
       },
       selectIsDisabled: () => {
-        return !stepperState.categories[stepperState.activeId]?.isEnabled;
+        const category = stepperState.categories?.[stepperState.activeId];
+        return category === undefined ? false : !category?.isEnabled;
       },
       selectIsActive: (id: number) => {
         return id === stepperState.activeId;
@@ -96,7 +98,7 @@ export const JsonFormsStepperContextProvider = ({
       goToPage: (id: number, updateCategoryId?: number) => {
         ajv.validate(schema, ctx.core?.data || {});
 
-        if (updateCategoryId !== undefined) {
+        if (updateCategoryId !== undefined && updateCategoryId < stepperState.categories.length) {
           stepperDispatch({
             type: 'update/category',
             payload: { errors: ctx?.core?.errors, id: updateCategoryId, ajv },

diff --git a/libs/jsonforms-components/src/lib/Controls/FormStepper/context/reducer.ts b/libs/jsonforms-components/src/lib/Controls/FormStepper/context/reducer.ts
@@ -58,7 +58,7 @@ export const stepperReducer = (state: StepperContextDataType, action: StepperAct
       if (id > lastId) {
         state.isOnReview = true;
         state.hasNextButton = false;
-        state.hasPrevButton = false;
+        state.hasPrevButton = true;
         return { ...state };
       } else {
         state.categories[id].isVisited = true;
@@ -77,6 +77,8 @@ export const stepperReducer = (state: StepperContextDataType, action: StepperAct
       const errorsInCategory = getErrorsInScopes(errors, state.categories[id].scopes || []);
       state.categories[id].isCompleted = incompletePaths?.length === 0;
       state.categories[id].isValid = errorsInCategory.length === 0;
+      state.categories[id].isVisited = true;
+
       return { ...state };
     }
     case 'validate/form': {