Redux Form - why does onBlur return unformatted phone number?
See original GitHub issueOverview
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.
Issue Analytics
- State:
- Created 6 years ago
- Comments:9 (8 by maintainers)
Top Results From Across the Web
redux-form format input ONLY onBlur - Stack Overflow
I send in the on blur prop, bind the function to the forms scope, and use the built in redux-form function ( change...
Read more >v5 → v6 Migration Guide - Redux Form
The mechanism that generates the props ( value , onChange , onBlur , etc.) for your input from the string name of your...
Read more >How to handle invalid user inputs in React forms for UX ...
Showing error on blur and hiding it immediately after correction is ... As an example of web forms, we will build a number...
Read more >Accessibility - React
Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. Accessibility support is...
Read more >react-currency-format - npm
onChange no longer gets values object. You need to use onValueChange instead. onChange/onFocus/onBlur and other input events will be directly ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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
andonChange
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.
Thx for the detailed bug report and the supplied demo. The bug has been identified and the fix has been released.