How to use react-phone-number-input with Material-UI TextField and ReduxForm's Field?

[maxpopovitch]

Guys, I have the similar issue using react-phone-number-input with Material-UI and Redux Form. I took a look at https://github.com/catamphetamine/react-phone-number-input/issues/354 and tried to use this approach, but I spent several hours and didn't manage it to work. The issue is that ref argument in InputPhone component is always an object with current field set to null. That's why I'm getting this error from react-phone-number-input when I'm trying to change the country by clicking select:

Moreover, the embedded parser which allows only numbers inside the input doesn't work.

This is how I implemented.

In ReduxForm component:

...
const [phone, setPhone] = useState();
const phoneRef = useRef();
...
<Field
   name="phone"
   component={InputPhone}
  value={phone}
  onChange={setPhone}
  label={t(`${namespaces.SIGN_UP}:form.phone`)}
  ref={phoneRef}
  required
  forwardRef
 />

InputPhone:

import React, { forwardRef } from 'react';
import PhoneNumberInput from 'react-phone-number-input';

import InputText from './InputText';
import 'react-phone-number-input/style.css';

const InputPhone = (props, ref) => {
  console.log(ref); // -> {current: null} - THIS IS THE ISSUE!
  return (
    <PhoneNumberInput
      {...props}
      {...props.input}
      inputComponent={InputText}
      inputRef={ref}
      type="tel"
      international
    />
  );
};
export default forwardRef(InputPhone);

InputText:

export const InputText = ({
  autoFocus = false,
  className,
  disabled = false,
  input,
  InputProps,
  inputRef,
  label,
  meta: { error, touched } = EMPTY_OBJECT,
  multiline = false,
  required,
  rows = 1,
  t,
  type = 'text',
}) => {
  const classes = useStyles();
  const isError = !!error && touched;
  const helperText =
    typeof error === 'object'
      ? t(
          `${error.namespace}:${error.key}`,
          error.options && { ...error.options },
        )
      : error;

  return (
    <TextField
      className={cn(classes.input, className)}
      {...input}
      disabled={disabled}
      InputProps={InputProps}
      inputRef={inputRef}
      multiline={multiline}
      label={label}
      required={required}
      rows={rows}
      type={type}
      autoFocus={autoFocus}
      variant="outlined"
      fullWidth
      error={isError}
      helperText={touched && helperText}
    />
  );
};

export default withTranslation()(InputText);

Please help! Thanks in advance.

[catamphetamine]

Duplicate of https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/19

[reutg]

@maxdonetsk Did you find a solution?

[maxpopovitch]

@reutg no, I used my own solution