@@redux-form/BLUR action updates my value

[SuEric]

Subject of the issue

I am using a custom component in my Field reduxForm, it is indeed passing the onChange property and the set of the value is working fine:

However, when I leave the element redux-form BLUR action is dispatched and changes my value, why?

custom components I am using:

• [email protected]
• @material-ui/[email protected], installing =>date-io/[email protected], @material-ui/core"@4.8.3 is needed.

Your environment

• OS: MacOS Catalina 10.15.3 (19D76)
• Packages: [email protected], [email protected], [email protected] & "[email protected]
• Env: Node 12

Steps to reproduce

1. Go to https://codesandbox.io/s/redux-form-template-jgc8v
2. Fill the UI of the input with (221) 212-1212
3. Click outside input element

• Notice how my value was changed
• Notice how BLUR redux action was dispatched and changed my value

🎉 BONUS POINTS for creating a minimal reproduction and uploading it to GitHub. This will get you the fastest support. 🎉

Expected behaviour

BLUR action should NOT update the value at all? It reduces flexibility and confuses the prediction of reduxForm values.

Actual behaviour

BLUR action somehow is updating my value

[iamandrewluca]

https://redux-form.com/8.3.0/docs/api/field.md/#-code-onblur-event-newvalue-previousvalue-name-gt-void-code-optional-

[OVBondHUB]

Hi @SuEric , you should implement onBlur wrapper, that will resolve, value from your date input field, onBlur works fine in this case, in your input you have ONLY formatted string: '05/06/2016', NOT date object like Moment, Date or anything other, so your wrapper should looks like: ` const handleInputBlur = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const { value } = event.target; props.input.onBlur(parseDateToStringBlur(value)); };

const parseDateToStringBlur = (date: string): string | null => { if (date) { const momentDate = moment(date, 'dd/mm/yyyy', true); const isMomentDateValid = momentDate.isValid(); if (isMomentDateValid) { return momentDate.format() } return null; }; `