Material-ui: Multiple active steps not working

Created on 8 Oct 2018  路  4Comments  路  Source: mui-org/material-ui

  • [x] This is not a v0.x issue.
  • [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Multiple active Step components(enabled with active prop on Step component) inside Stepper should expand all Steps

Current Behavior

Multiple active Step components inside Stepper activates only one Step.

This works on Material-UI upto v3.1.1, but does not work in v3.1.2 onwards

Steps to Reproduce


Links:

  1. v3.1.1 demo(working) - https://codesandbox.io/s/rj5k2w6jo
  2. v3.1.2 demo(not working) - https://codesandbox.io/s/2vxjl116zy

Context

I'm trying to show all details inside stepper in one view, without expanding step manually

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.1.2 |
| React | 16.5.2 |
| Browser | Chrome 69 |
| OS | Linux(Ubuntu) |

bug 馃悰 Stepper good first issue

All 4 comments

I think setting active on all Steps is a hacky way to achieve what #12948 is asking for. The change was caused by #13023.

The fix is pretty simple. Changing the order in https://github.com/spirosikmd/material-ui/blob/89f6c30fbf38e0ce87cd6bb5554bd460ef343e25/packages/material-ui/src/Stepper/Stepper.js#L88
should be sufficient. Do you want to work on it?

From a semantic point of view I don't see a reason to allow multiple active steps so I would say that you relied on a bug. The active prop on StepConnector should be controlled by the Stepper component. On the other hand the fix would give some control back to the user.

This would be no issue if we could get rid of the cloneElement pattern and let users control this via render props. See #12921 for more information.

@eps1lon I have just spotted the issue too looking into #13130. We miss a unit test :)
```diff
- React.cloneElement(step, { ...controlProps, ...step.props, ...state }),
+ React.cloneElement(step, { ...controlProps, ...state, ...step.props }),

Thanks for looking into this @eps1lon. Shall I submit a PR with those changes? @oliviertassinari

@nikhilem Yes, please :)

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rbozan picture rbozan  路  3Comments

activatedgeek picture activatedgeek  路  3Comments

ghost picture ghost  路  3Comments

mattmiddlesworth picture mattmiddlesworth  路  3Comments

reflog picture reflog  路  3Comments