Redux Form v6 - Generating dynamic form with unique keys loses focus on entering value

Viewed 719

hope someone know's the issue. I have an Array like:

let fields = [
    { name: 'email', type: 'email', placeholder: 'Email', component: FeedbackInput },
    { name: 'password', type: 'password', placeholder: 'Passwort', component: FeedbackInput }
];

And i want to render it within my redux form via:

<form onSubmit={ handleSubmit(this.props.startAnimation.bind(this, 'animatedBtnConfig')) }>
 <fieldset>
  { fields.map(field => <Field key={_.uniqueId('field_')}  { ...field } component={ FeedbackInput } />) }
 </fieldset>
 <fieldset className="center">
  <AnimatedButtonRedux />
 </fieldset>
</form>

So the problem is that the form is initial valid and i can enter only 1 character. Then it looses the focus from the input field and have to click it again.

Same Problem when i try it with "FieldArray":

<FieldArray name="authData" component={ DynamicFields } fields={ fields } />

Dynamic Fields Component:

export default props => {
  console.log("Dynamic Fields: ", props);
  return (
    <div>
      { props.fields.map(field => <Field key={_.uniqueId('field_')} { ...field }  />) }
    </div>
  );
};

Instead, when i trying it this way:

<Field { ...fields[0] } />
<Field { ...fields[1] } />
<Field { ...fields[2] } />

It work's well.

I can't see any difference in the devtool's when i look at the DOM. Why does redux form behave's this way? I can't figure it out. I would really appreciate it, when someone could give me the crucial tipp to solve this issue!

1 Answers
Related