Skip to content
Bug reportOct 22, 2026· 0:46· 9 views

Semi Design Steps: initial={1} breaks onChange — next step click fires nothing

0:46 total

Comments · 0

Be the first to comment.

Bug reportby SceneRecap AI

mediumSteps component (type="basic") click handling. Look at how the clicked step index is computed and passed to onChange when the initial prop is non-zero.
os: macOSdpr: 1page: /zh-CN/navigation/steps (Steps 步骤 - Semi Design)locale: en-USbrowser: Chromium 151.0.7922.34timezone: Europe/Berlinviewport: 1280x720

Repro steps

  1. 1.Open the Semi Design Steps docs page at /zh-CN/navigation/steps.
  2. 2.Scroll down to the 默认步骤条(旧版) demo.
  3. 3.Click the 'Live code editor' of that demo.
  4. 4.Press Cmd+a to select all code.
  5. 5.Paste code that uses useState(1) and <Steps type="basic" initial={1} current={current} onChange={setCurrent}> with three Steps.Step items (Step One, Step Two, Step Three).
  6. 6.Click the 'Step Two' list item in the preview.
  7. 7.Click the 'Step Two' list item again.

Expected

Clicking Step Two should call onChange. setCurrent should then update the state, 'Current step' should change from 1 and Step Two should become the active step.

Actual

After each click on Step Two, 'Current step' stays at 1 and Step One stays the active step. Step Two only shows a blue hover highlight. The state never changes.

Evidence

visualAfter the paste the preview shows 'Current step: 1' with Step One active. The step icons are numbered 2, 3 and 4, which is consistent with initial={1}.
visualAfter the first click on Step Two, the item shows a blue hover highlight. 'Current step' is still 1.
visual'Current step: 1' and Step One active are unchanged after the first click.
visualAfter the second click on Step Two, 'Current step' is still 1 and Step One is still active.
visualThe failing demo code is visible: useState(1) and <Steps type="basic" initial={1} current={current} onChange={setCurrent}>.
visualControl variant: the code is changed to useState(0) and <Steps type="basic" current={current} onChange={setCurrent}>, with no initial prop. Step Two is clicked at 40.98s. The sampled frames do not show the preview result, so the control outcome is not evidenced.
consoleOn page load the console logs: TypeError: Cannot read properties of null (reading '/zh-CN') in app-11d708dccad1497c7e8f611116.js. This is logged before any interaction and may be unrelated to Steps.
Issue markdown (copy-paste ready)
## Summary
On the Semi Design Steps docs page, a `Steps type="basic"` demo using `initial={1}` does not update when another step is clicked. With `onChange={setCurrent}`, clicking Step Two leaves `current` at 1.

## Environment
- Browser: Chromium 151.0.7922.34
- OS: macOS
- Viewport: 1280x720, DPR 1
- Locale: en-US, timezone Europe/Berlin
- Page: `/zh-CN/navigation/steps` (Steps 步骤 - Semi Design)

## Steps to reproduce
1. Open `/zh-CN/navigation/steps` (0s).
2. Scroll to the 默认步骤条(旧版) demo (4.56s).
3. Click the Live code editor, press Cmd+a, then paste the code below (12.05s to 13.69s):
```jsx
const [current, setCurrent] = React.useState(1);
return (
  <div style={{ padding: 24 }}>
    <p style={{ marginBottom: 12, fontSize: 13, color: '#555' }}>
      Current step: <strong>{current}</strong>
    </p>
    <Steps type="basic" initial={1} current={current} onChange={setCurrent}>
      <Steps.Step title="Step One" description="First step" />
      <Steps.Step title="Step Two" description="Second step" />
      <Steps.Step title="Step Three" description="Third step" />
    </Steps>
  </div>
);
```
4. Click **Step Two** in the preview (22.15s), then click it again (27.26s).

## Expected
The click calls `onChange` and `current` changes. Step Two becomes the active step.

## Actual
`Current step` stays at **1** and Step One stays active after both clicks (frames at 25s and 31s). Step Two only shows a hover highlight (23s, 29s).

## Evidence
- 17s: the preview shows `Current step: 1`. Step icons are numbered 2, 3 and 4, as expected with `initial={1}`.
- 22.15s / 27.26s: clicks on the `Step Two` list item. No state change follows.
- 33s: the failing code with `initial={1}` and `useState(1)` is visible.
- 0s console: `TypeError: Cannot read properties of null (reading '/zh-CN')` in `app-11d708dccad1497c7e8f611116.js`. It is logged on load before any interaction, so it is likely unrelated.

## Control (not confirmed)
At 34.19s the code was changed to `useState(0)` with no `initial` prop. Step Two was clicked at 40.98s. The sampled frames do not show the result of that click, so this recording does not confirm whether the variant without `initial` works.

## Suggested area
Check the Steps (`type="basic"`) click handler. Look at how the clicked index is derived and offset by `initial` before it is passed to `onChange`.

*Recorded with SceneRecap.*

Your recordings could explain themselves too.

Free plan · silent recordings welcome · bug reports included.

Try SceneRecap free →
Semi Design Steps: initial={1} breaks onChange — next step click fires nothing · SceneRecap