Multiple active steps not working

[nikhilem]

• This is not a v0.x issue.
• 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)

[eps1lon]

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.

[oliviertassinari]

@eps1lon I have just spotted the issue too looking into #13130. We miss a unit test :)

-      React.cloneElement(step, { ...controlProps, ...step.props, ...state }),
+      React.cloneElement(step, { ...controlProps, ...state, ...step.props }),

[nikhilem]

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

[oliviertassinari]

@nikhilem Yes, please :)