FieldArray will lose the first focus from dispatch(initialize(initFieldArrayData)) after inputting

[cisen]

But initialize FieldArray by fields.push(initFieldArrayData) is ok. I think there is some thing wrong with initial action.

[jonjaques]

Just posting this here cause I ran into similar behavior - Make sure you don't have something like this:

<FieldArray name="variants"  component={props => <... />} />

// Move the above component def outside of the render() method 

render() {
  ...
  <FieldArray name="variants"  component={VariantEditor} />
  ...
}

const VariantEditor = props => <div/>

Do you see the error there? Passing an inline fn like that causes all sorts of focus problems, and is insanely inefficient because it's creating a new component dfn every time it renders (which is often).

[gustavohenke]

Hi @cisen, @jonjaques is right, this is a common error when dealing with Redux Form.

Let me know if your problem is another one.

[gustavohenke]

Oh, and if you can provide some code example that reproduces your issue, it'll be great.
Start here: https://jsfiddle.net/gustavohenke/48814zsq/

[cisen]

@gustavohenke I think it was some thing like the example. But i don't know why it won't happen in the example。May be because this data's structure is too simple. In my case, it contains Hundreds items and deep nesting。

// BEGIN SETUP
const { Component } = React;
const {reduxForm, FormSection, FieldArray, Field, reducer: formReducer } = ReduxForm;
const { createStore, combineReducers } = Redux;
const { Provider } = ReactRedux;
const reducer = combineReducers({ 
	form: formReducer 
});
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
// END SETUP

// -----

// BEGIN EXAMPLE

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} type={type} placeholder={label}/>
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

const renderMembers = ({ fields, meta: { touched, error } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push({})}>Add Member</button>
      {touched && error && <span>{error}</span>}
    </li>
    {fields.map((member, index) =>
      <li key={index}>
        <button
          type="button"
          title="Remove Member"
          onClick={() => fields.remove(index)}/>
        <h4>Member #{index + 1}</h4>
        <Field
          name={`${member}.firstName`}
          type="text"
          component={renderField}
          label="First Name"/>
        <Field
          name={`${member}.lastName`}
          type="text"
          component={renderField}
          label="Last Name"/>
        <FieldArray name={`${member}.hobbies`} component={renderHobbies}/>
      </li>
    )}
  </ul>
)

const renderHobbies = ({ fields, meta: { error } }) => (
  <ul>
    <li>
      <button type="button" onClick={() => fields.push()}>Add Hobby</button>
    </li>
    {fields.map((hobby, index) =>
      <li key={index}>
        <button
          type="button"
          title="Remove Hobby"
          onClick={() => fields.remove(index)}/>
        <Field
          name={hobby}
          type="text"
          component={renderField}
          label={`Hobby #${index + 1}`}/>
      </li>
    )}
    {error && <li className="error">{error}</li>}
  </ul>
)

const FieldArraysForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <Field name="clubName" type="text" component={renderField} label="Club Name"/>
      <FieldArray name="members" component={renderMembers}/>
      <div>
        <button type="submit" disabled={submitting}>Submit</button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
      </div>
    </form>
  )

const Form = ({ handleSubmit }) => (
	<form onSubmit={ handleSubmit }>
    Hello
    <Field 
      name='hello'
      component='input'
      type='text'
      placeholder='Say hello' />
    <button type="submit">Submit</button>
  </form>
);

const ReduxifiedForm = reduxForm({
	form: 'form',
  initialValues: { hello: "world" },
  onSubmit ( values ) {
  	console.log( values );
  }
})( Form );

// END EXAMPLE
ReactDOM.render(
	<Provider store={store}>
    <ReduxifiedForm />
  </Provider>,
  document.querySelector('main')
);

[gustavohenke]

Because this issue saw almost no activity for a few months, I'm closing it.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.