redux-form sandbox

"key" change breaks fields

by oakley808

HTML

<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.6/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-form/6.5.0/redux-form.js"></script>
<div id="root">
</div>

CSS

.member {
  border: 1px black solid;
  padding: 6px;
  margin-top: 6px;
}

Babel + JSX

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

const required = value => value === 'hello' ? undefined : 'Must be polite'; 

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

class Form extends React.Component {
	render() {
	  const { vals } = this.props;
    const {check} = vals || {};
    console.log(check);
  	return (<div>
    
    Steps to reproduce: <br />
    1. Touch "Last" field (validation error will appear)<br />
    2. Change "yes" to any other value<br />
    Expected: validation error should go away<br /><br />
    Actual: validation error does not go away even if you touch the field. Only change triggers new validation.
    <br/><br/>Validate?
  <Field name="check" type="text" component={renderField} /><br />
    First 
    <Field name='firstName' component={renderField} type='text' 
      validate={check === 'yes' ? [required] : null } /><br />
    Last 
    {
    	check === 'yes' ?
          <Field name='lastName' type='text' 
          component={renderField}
          validate={[required]}/> :
              <div><Field name='lastName' type='text' 
          component={renderField} />No validation</div>
    }
<br />
          { check !== 'yes' ? "The field must not be validated, but it is, until you change it. Even touching is not enough" : null}
  </div>);
  }
}

Form = reduxForm({
	form: 'foo',
  initialValues: {firstName:...