UPDATE_SYNC_ERRORS not invoked when unregistering Field

[dariospadoni]

Are you submitting a bug report or a feature request?

Bug report

What is the current behavior?

1. Open this link https://staging2.amavido.de/hosts/register/basic
2. Click on "Property Details"
3. Select "Yes, it's optional" from the breakfast dropdown; UPDATE_SYNC_ERRORS is invoked, a new required Field will be registered, validation messages will appear (on top and below the field)
4. select "No" from the dropdown; the Field is unmounted and unregistered; however UPDATE_SYNC_ERRORS is not invoked and syncErrors still contains the unregistered required field

What is the expected behavior?

Field should be removed from syncErrors and form should not have any validation error anymore.

"Basic Info" has a similar case and it works; follow this steps:

1. go to "Basic Info" and select "Other" from the last dropdown "How did you take notice of amavido?"
2. UPDATE_SYNC_ERRORS is invoked, a new required Field will be registered, validation messages will appear (on top and below the field)
3. select any other different value from the same dropdown
4. the Field is unregistered and removed from syncErrors(expected behavior)

I also tried to assign a field name with no . but still the error persists.

What's your environment?

Redux Form 6.7.0
React 15.4.1

Other information

[dariospadoni]

Same happens with Redux Form 7.0.1

[erikras]

Aha! Wow, this was a tricky one. I've found the problem. I mean, how deceptive is this? 😆

The problem is that the object in syncErrors is not an immutable map, but a regular Object. Should be pretty easy to fix.

[dariospadoni]

@erikras I also just noticed that there's no problem when there's at least another mounted Field with some validation (this explains why there's no problem in the "basic info" section of the same page.

[erikras]

Published fix in v7.0.2.

[timacs12]

overide the sync error updation after working one day

import * as phenomicReducers from "phenomic/lib/redux/modules";
import { reducer as formReducer } from "redux-form";
import { combineReducers } from "redux";
import selectedApplyForm from "./SelectedApplyForm";
function callUpdateSyncErrors(state, action) {
console.log("formReducer is called", state, action.type);
// action.type === "@@redux-form/CHANGE" &&
// action.meta.field === "select_your_profession1";
if (state && action.type) {
console.log("state>>>>>>>>>>>>", state);
let flag = 0;
let { registeredFields, syncErrors, values } = state;
if (syncErrors && registeredFields) {
let regFieldKeys = Object.keys(syncErrors);
regFieldKeys.map(key => {
flag = 1;
console.log("key>>>>>>>>,", key, registeredFields);
if (!registeredFields[key]) delete syncErrors[key];
});
}
if (registeredFields) {
flag = 1;
syncErrors = {};
}

let new_synError = [];
let new_registeredField = [];
let difference = [];
if (registeredFields)
  new_registeredField = Object.keys(registeredFields);
if (syncErrors)
  new_synError = Object.keys(syncErrors);
difference = new_registeredField.filter(x => new_synError.indexOf(x) === -1);
difference.map((key) => {
  if (!values[key])
    if (syncErrors)
      syncErrors[key] = "Required *";
    else {
      syncErrors = {};
      syncErrors[key] = "Required *";
    }
})


if (difference.length !== 0 || flag === 1)
  return {
    ...state,
    syncErrors: {
      ...syncErrors
    }
  };
return state;

}
else return { ...state };
}
const rootReducer = combineReducers({
...phenomicReducers,
selectedApplyForm,
form: formReducer.plugin({
iBLeadApplyForm: (state, action) => {
return callUpdateSyncErrors(state, action);
}
,
IotBootcampThankyouform: (state, action) => {
return callUpdateSyncErrors(state, action);
}
})
});
// const rootReducer = combineReducers({
// ...phenomicReducers,
// form: formReducer,
// selectedApplyForm
// })
export default rootReducer;

[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.