From 64358b0980f9cd603fc1121254988d238343e2e5 Mon Sep 17 00:00:00 2001
From: Federico Morreale <frc.morreale@gmail.com>
Date: Tue, 14 Nov 2023 10:32:59 +0100
Subject: [PATCH] fix: review changes

Signed-off-by: Federico Morreale <frc.morreale@gmail.com>
---
 .../next/components/Stepper/Stepper.test.tsx  | 48 +++++++++++++++++++
 .../src/next/components/Stepper/Stepper.tsx   |  9 ++--
 2 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx
index 34243e232d..2bb66fd782 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx
+++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx
@@ -112,6 +112,54 @@ describe('Stepper', () => {
     );
   });
 
+  it('should remember the state of the form when cycling through the pages by directly clicking on the step labels', async () => {
+    const manifest: TemplateParameterSchema = {
+      steps: [
+        {
+          title: 'Step 1',
+          schema: {
+            properties: {
+              name: {
+                type: 'string',
+              },
+            },
+          },
+        },
+        {
+          title: 'Step 2',
+          schema: {
+            properties: {
+              description: {
+                type: 'string',
+              },
+            },
+          },
+        },
+      ],
+      title: 'React JSON Schema Form Test',
+    };
+
+    const { getByRole, getByLabelText } = await renderInTestApp(
+      <Stepper manifest={manifest} extensions={[]} onCreate={jest.fn()} />,
+    );
+
+    await fireEvent.change(getByRole('textbox', { name: 'name' }), {
+      target: { value: 'im a test value' },
+    });
+
+    await act(async () => {
+      await fireEvent.click(getByRole('button', { name: 'Next' }));
+    });
+
+    await act(async () => {
+      await fireEvent.click(getByLabelText('Step 1'));
+    });
+
+    expect(getByRole('textbox', { name: 'name' })).toHaveValue(
+      'im a test value',
+    );
+  });
+
   it('should merge nested formData correctly in multiple steps', async () => {
     const Repo = ({
       onChange,
diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
index ccb97829dc..5aaf76316c 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
+++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
@@ -192,13 +192,14 @@ export const Stepper = (stepperProps: StepperProps) => {
       {isValidating && <LinearProgress variant="indeterminate" />}
       <MuiStepper activeStep={activeStep} alternativeLabel variant="elevation">
         {steps.map((step, index) => {
-          const isAllowedTitleClick = activeStep > index;
+          const isAllowedLabelClick = activeStep > index;
           return (
-            <MuiStep key={step.title}>
+            <MuiStep key={index}>
               <MuiStepLabel
-                style={{ cursor: isAllowedTitleClick ? 'pointer' : 'text' }}
+                aria-label={`Step ${index + 1}`}
+                style={{ cursor: isAllowedLabelClick ? 'pointer' : 'default' }}
                 onClick={() => {
-                  if (isAllowedTitleClick) setActiveStep(index);
+                  if (isAllowedLabelClick) setActiveStep(index);
                 }}
               >
                 {step.title}