Redux Form - why does onBlur return unformatted phone number?

Overview

redux-form: 6.7.0
react-phone-number-input: 0.11.11

I’m using this component with redux-form and wondered why the onBlur event returns the unformatted number and why this differs from the onChange event.

The code alludes to this being a fix originally. If possible can you let me know why this is the case?

I’m working around this at present, I pass my own custom onBlur function which passes the current formatted number. I always want the formatted number to be stored in redux state.

[jwarykowski]

@catamphetamine thanks for the quick comments and sorry for the delay in replying.

Please see the following example as it will make a lot more sense after looking at the code. Open up the dev tools and you’ll see the console logs from the onChange and onBlur events.

The problem I have is that when you perform field level validation with redux form its called following the onBlur and onChange callbacks. Please also note that the field’s redux form state value will be updated following the on blur callback.

In my example, the on blur callback value returns an invalid phone number when passed through the exported isValidPhoneNumber function. This means I show a validation error even though the number is technically valid (it’s just missing its international extension).

So, following your last comments, the onChange and onBlur callback values don’t match so this should be reopened as a bug. I think it should match the current onChange value.

In my example, I’ve commented out a workaround which simply takes the current value and passes this back.

Let me know your thoughts.

[catamphetamine]

Thx for the detailed bug report and the supplied demo. The bug has been identified and the fix has been released.