Steps are processed incorrectly when provided as array

[megawac]

Version

2.9.0

Environment

Ubuntu 14.04, FF 52

Reproduction link

http://codepen.io/megawac/pen/GWLJeY

Steps to reproduce

Pass Steps.Step to Steps as an array. See code below

function App() {
  let steps = [{
    title: 'Step 1',
    description: 'step 1 description'
  }, {
    title: 'Step 2',
    description: 'step 2 description'
  }, {
    title: 'Step 3',
    description: 'step 3 description'
  }];

  return (
    <div style={{margin: 100}}>
      <Steps direction="vertical" current={2}>
        {steps.map((step, index) => {
          return (
            <Steps.Step
              title={step.title}
              description={step.description}
              key={index}
            />
          );
        })}

        <Steps.Step
          title={'Complete'}
          icon="check-circle-o"
        />
      </Steps>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

What is expected?

Steps are connected correctly.

What is actually happening?

When steps are provided as an array (with more than 2 steps), the step between the 2nd and the third always breaks and the final step incorrectly included a connecting line.

In the demo below I added an additional step after the array to illustrate a secondary issue. Similar issues will occur with multiple arrays or a step before the array.

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.