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:

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 ([phone]). 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.

[catamphetamine]

[catamphetamine]

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}/>
  )
}