Some redux-form properties doesn't change

Well, I wrapped your component into Field by redux-form and trying to get some meta information, like that:

class wrappedPhone extends React.Component {
	/* ... */

	render() {
		console.log(this.props.meta); <------- this one
		const { input } = this.props;
		
		return (
			<Phone
				value={input.value}
				onChange={this.handleOnChange}
			/>
		);
	}
}

<Field
	name="phone"
	component={wrappedPhone}
/>

and while trying to focus/blur/change field there are at least visited and touched meta props doesn’t change.

For simple input it works ok.

[goodwin64]

For those who will come to this issue as well as me, the solution is quite simple:

// form.jsx
<form>
  <Field
    component={FieldPhoneNumber}
    name="phoneNumber"
  />
</form>



// FieldPhoneNumber.jsx
export function FieldPhoneNumberBase(props: IProps) {
  const { input, meta, ...restProps } = props;

  return (
    <div>
      <ReactPhoneNumberInput
        {...restProps}
        {...input}            // <--- we spread all input props including onFocus and onBlur
        value={input.value}
        onChange={(phoneNumber) => phoneNumber ? input.onChange(phoneNumber) : input.onChange(null)}
      />
      {
        props.meta.touched && (               // <--- and here we can access all meta props
          <FieldError error={meta.error}/>
        )
      }
    </div>
  );
}

[catamphetamine]

Maybe it should be written in docs to not doing mistakes. But not sure.

No, it’s purely a redux-form thing. It applies to any React component. The only way is to pass {...this.props} to the component being wrapped.