From 94c11a5d7f5102ca5aa635167b3661207223fce8 Mon Sep 17 00:00:00 2001 From: Stephen Glass Date: Sun, 6 Jul 2025 00:24:27 -0400 Subject: [PATCH] Scroll to the top of the page when navigating between template form steps Signed-off-by: Stephen Glass --- .changeset/loud-turtles-mate.md | 5 +++++ .../src/next/components/Stepper/Stepper.tsx | 8 ++++++++ 2 files changed, 13 insertions(+) create mode 100644 .changeset/loud-turtles-mate.md diff --git a/.changeset/loud-turtles-mate.md b/.changeset/loud-turtles-mate.md new file mode 100644 index 0000000000..533f899c92 --- /dev/null +++ b/.changeset/loud-turtles-mate.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Scroll to the top of the page when navigating between steps in template forms. diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 6715eb0e1e..94ced3e415 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -37,6 +37,7 @@ import { merge } from 'lodash'; import { ComponentType, useCallback, + useEffect, useMemo, useState, type ReactNode, @@ -218,6 +219,13 @@ export const Stepper = (stepperProps: StepperProps) => { [validation, analytics], ); + useEffect(() => { + const main = document.querySelector('main'); + if (main) { + main.scrollTo({ top: 0, behavior: 'auto' }); + } + }, [activeStep]); + const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema); const [isCreating, setIsCreating] = useState(false);