diff --git a/.changeset/beige-chairs-suffer.md b/.changeset/beige-chairs-suffer.md
new file mode 100644
index 0000000000..c642b70cbb
--- /dev/null
+++ b/.changeset/beige-chairs-suffer.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+`SimpleStepper` back button now works with `activeStep` property set higher than 0
diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx
index 73baff8db2..e4093f07d2 100644
--- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx
+++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx
@@ -173,4 +173,32 @@ describe('Stepper', () => {
fireEvent.click(getTextInSlide(rendered, 2)('Back') as Node);
expect(rendered.getByText('step1')).toBeInTheDocument();
});
+
+ it('Handles onBack action properly when activeStep is higher than 0', async () => {
+ const rendered = await renderInTestApp(
+
+
+ step0
+
+
+ step1
+
+
+ step2
+
+ ,
+ );
+
+ fireEvent.click(getTextInSlide(rendered, 2)('Back') as Node);
+ expect(rendered.getByText('step1')).toBeInTheDocument();
+
+ fireEvent.click(getTextInSlide(rendered, 1)('Back') as Node);
+ expect(rendered.getByText('step0')).toBeInTheDocument();
+
+ fireEvent.click(getTextInSlide(rendered, 0)('Next') as Node);
+ expect(rendered.getByText('step1')).toBeInTheDocument();
+
+ fireEvent.click(getTextInSlide(rendered, 1)('Next') as Node);
+ expect(rendered.getByText('step2')).toBeInTheDocument();
+ });
});
diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx
index 4a1a4ab919..b0b6c1afd0 100644
--- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx
+++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx
@@ -32,6 +32,7 @@ type InternalState = {
};
const noop = () => {};
+
export const VerticalStepperContext = React.createContext({
stepperLength: 0,
stepIndex: 0,
@@ -50,7 +51,17 @@ export interface StepperProps {
export function SimpleStepper(props: PropsWithChildren) {
const { children, elevated, onStepChange, activeStep = 0 } = props;
const [stepIndex, setStepIndex] = useState(activeStep);
- const [stepHistory, setStepHistory] = useState([0]);
+ /*
+ Recreates the stepHistory array based on the activeStep
+ to make sure the handleBack function of the Footer works when activeStep is higher than 0
+ */
+ const inOrderRecreatedStepHistory = Array.from(
+ { length: activeStep + 1 },
+ (_, i) => i,
+ );
+ const [stepHistory, setStepHistory] = useState(
+ inOrderRecreatedStepHistory,
+ );
useEffect(() => {
setStepIndex(activeStep);