react-phone-number-input: Initial value won't load in redux-form.

Hi,

I’m using this together with redux-form v6, and i cannot make it load initial values:

I first tried this, as suggested in docs:

import Phone from 'react-phone-number-input'
import React from 'react';
import { Field } from 'redux-form';
import 'react-phone-number-input/style.css';

export default class MyPhoneInput extends React.Component {
	render() {
    	return (<Field name={props.name} component={Phone} />)
	}
}

But once i select a country from dropdown, i get error in console: error

So i tried wrapping it myself for redux-form like this:

import Phone from 'react-phone-number-input'
import React from 'react';
import { Field } from 'redux-form';
import 'react-phone-number-input/style.css';

export default class MyPhoneInput extends React.Component {
  constructor(props) {
    super(props);
    this.fieldInput = this.setupInput();
  }

  setupInput() {
    return (field) => {
      return (
        <Phone {...field.input} />
      );
    };
  }

  render() {
	return (<Field name={props.name} component={this.fieldInput} />)
  }
}

This made it work on inputing. I could properly select a country,enter the phone number, and pass it down to API in proper format. So far so good.

Once i load the same redux-form, with initialValues passed in, Nothing is prepopulated in the input, no country and no number. I console logged field.input and it properly contains all the events (onChange, onBlur, etc), and has a value property that is a valid number (+441632960293). All other inputs that i have are properly populated.

React version: 15.6.1 Redux version: 5.0.5 Redux-form version: 6.8.0

Edit: Looks like the country is properly preselected, but the number input is empty.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 17 (9 by maintainers)

Commits related to this issue

#162. Support old React. Reverted the requirement for React >= 16.3 — committed to catamphetamine/react-phone-number-input by purecatamphetamine 6 years ago

Most upvoted comments

catamphetamine on Jul 25, 2018

So, the reason onChange wasn’t passed to the component is that <Field/> doesn’t pass it and instead it passes only input: { value, onChange } and meta: { ... } objects as properties. https://redux-form.com/6.0.0-rc.4/docs/api/field.md/ Therefore, you’ll have to wrap this component in a special ReduxFormPhoneInput wrapper like this:

function ReduxFormPhoneInput({ input: { value, onChange }, meta }) {
  return (
    <Phone value={value} onChange={onChange}/>
  )
}

catamphetamine on Jul 25, 2018

Status update: had to do some work today on my job. Now I’m going to the city. Will come back today’s late evening and will look at your sample project.

catamphetamine on Jul 25, 2018

@catamphetamine here it is https://github.com/kristijanhusak/react-phone-input-test-repo

Clone it, run npm run fast-start. I used some shitty react redux app cli, but it does the trick. So i passed same phone number on two different fields, one is this phone number input, and another is just default input. Important files: Home.jsx and MyForm.jsx.

kristijanhusak on Jul 24, 2018