question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Redux Form - why does onBlur return unformatted phone number?

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

2reactions
jwarykowskicommented, Jul 21, 2017

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

1reaction
catamphetaminecommented, Jul 21, 2017

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found