Use together Clickable steps and Footer inside the step.

[luisalrp]

Hello,

I'm trying to use together Clickable steps and Footer inside the step. Clickable steps works, but the prev and next buttons do not. Any tips what I'm not doing properly?

import { Button } from '~/components/ui/button';
import type { StepItem } from '~/components/ui/stepper';
import { Step, Stepper, useStepper } from '~/components/ui/stepper';

const steps = [
  { label: 'Step 1' },
  { label: 'Step 2' },
  { label: 'Step 3' },
] satisfies StepItem[];

export function StepperDemo() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Stepper
        orientation="vertical"
        initialStep={0}
        steps={steps}
        onClickStep={(step, setStep) => {
          setStep(step);
        }}
      >
        {steps.map((stepProps, index) => {
          return (
            <Step key={stepProps.label} {...stepProps}>
              <div className="bg-secondary text-primary my-4 flex h-40 items-center justify-center rounded-md border">
                <h1 className="text-xl">
                  Step
                  {index + 1}
                </h1>
              </div>
              <StepButtons />
            </Step>
          );
        })}
        <FinalStep />
      </Stepper>
    </div>
  );
}

function StepButtons() {
  const { nextStep, prevStep, isLastStep, isOptionalStep, isDisabledStep } =
    useStepper();
  return (
    <div className="mb-4 flex w-full gap-2">
      <Button
        disabled={isDisabledStep}
        onClick={prevStep}
        size="sm"
        variant="secondary"
      >
        Prev
      </Button>
      <Button size="sm" onClick={nextStep}>
        {isLastStep ? 'Finish' : isOptionalStep ? 'Skip' : 'Next'}
      </Button>
    </div>
  );
}

function FinalStep() {
  const { hasCompletedAllSteps, resetSteps } = useStepper();

  if (!hasCompletedAllSteps) return null;

  return (
    <>
      <div className="bg-secondary text-primary flex h-40 items-center justify-center rounded-md border">
        <h1 className="text-xl">Woohoo! All steps completed! 🎉</h1>
      </div>
      <div className="flex w-full justify-end gap-2">
        <Button size="sm" onClick={resetSteps}>
          Reset
        </Button>
      </div>
    </>
  );
}

Thanks!

[RayRizzling]

The current implementation of the Stepper component includes an unnecessary onClickStep prop, which interferes with the default step navigation. Here's the problematic code:

<Stepper
    orientation="vertical"
    initialStep={0}
    steps={steps}
    onClickStep={(step, setStep) => {
      setStep(step); // Manual step management
    }}
>

Remove the onClickStep prop to restore the default step management. The updated implementation is:

  <Stepper
    orientation="vertical"
    initialStep={0}
    steps={steps}
  >

Explanation:
The onClickStep prop is intended for custom navigation behavior, but it is unnecessary for basic use cases. Omitting it allows the Stepper to rely on its built-in state management, ensuring proper functionality for the "Prev" and "Next" buttons without introducing redundant or conflicting logic :)