diff --git a/plugins/scaffolder-react/src/components/types.ts b/plugins/scaffolder-react/src/components/types.ts
index d5d317015d..3df6209cad 100644
--- a/plugins/scaffolder-react/src/components/types.ts
+++ b/plugins/scaffolder-react/src/components/types.ts
@@ -32,7 +32,12 @@ export type TemplateGroupFilter = {
*/
export type FormProps = Pick<
SchemaFormProps,
- 'transformErrors' | 'noHtml5Validate' | 'uiSchema' | 'formContext'
+ | 'transformErrors'
+ | 'noHtml5Validate'
+ | 'uiSchema'
+ | 'formContext'
+ | 'omitExtraData'
+ | 'liveOmit'
>;
/**
diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
index 3a8858144b..16a3bb0761 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
+++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
@@ -155,9 +155,13 @@ export const Stepper = (stepperProps: StepperProps) => {
};
const handleChange = useCallback(
- (e: IChangeEvent) =>
- setFormState(current => ({ ...current, ...e.formData })),
- [setFormState],
+ (e: IChangeEvent) => {
+ setFormState(current => ({
+ ...current,
+ [`step${activeStep}`]: e.formData,
+ }));
+ },
+ [setFormState, activeStep],
);
const handleCreate = useCallback(() => {
@@ -191,7 +195,7 @@ export const Stepper = (stepperProps: StepperProps) => {
return stepNum;
});
}
- setFormState(current => ({ ...current, ...formData }));
+ setFormState(current => ({ ...current, [`step${activeStep}`]: formData }));
};
const {
@@ -202,6 +206,16 @@ export const Stepper = (stepperProps: StepperProps) => {
const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema);
+ const mergedState = useMemo(() => {
+ const { [`step${activeStep}`]: activeState, ...historicalState } =
+ formState;
+ const chronologicalState = {
+ ...historicalState,
+ [`step${activeStep}`]: activeState,
+ };
+ return merge({}, ...Object.values(chronologicalState));
+ }, [formState, activeStep]);
+
return (
<>
{isValidating &&