Integration with react-hook-form always render international format

[hossambarakat]

Thanks for the great component.

Plugin version

24.6.0

Steps to reproduce

I am trying to create a reusable component called MobileField to use inside my react-hook-form . I use the component as shown below

<MobileField name="phoneNumber" label="Phone Number" />

The reusable component

import React from "react";
import IntlTelInput from "intl-tel-input/reactWithUtils";
import "intl-tel-input/styles";

import { Controller, useFormContext } from 'react-hook-form';
import { useSettings } from "@/context/SettingsContext";

type MobileFieldProps = {
  name: string;
  label: string;
};

const MobileField: React.FC<MobileFieldProps> = ({ name, label }) => {

  const { control, formState: { errors }, getValues } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { onChange, value } }) => (
        <div>
          <label
            htmlFor={name}
            className="block text-sm font-medium leading-6 text-gray-900"
          >
            {label}
          </label>
          <IntlTelInput
            inputProps={{
              id: name,
              name: name,
              className: "block w-full rounded-md border-0 py-1.5 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
            }}
            initialValue={value}
            onChangeNumber={(newNumber) => {
              onChange(newNumber);
            }}
            initOptions={{
              initialCountry: "AU",
              formatOnDisplay: true,
              nationalMode: true,
              formatAsYouType: true,
              containerClass: "w-full",
            }}
          />
          {errors[name] && (
            <p className="mt-2 text-sm text-red-600">{errors[name]?.message?.toString()}</p>
          )}
        </div>
      )}
    />
  );
};

export default MobileField;

Expected behaviour

I am expecting the component to render the phoneNumber in national format

Actual behaviour

The component renders the phoneNumber in international format. I tried passing hardcoded value to the component and it renders the state using the national format so I am not sure what I am missing.

I appreciate your support with any pointers on what to trial or what is missing.

Thanks, Hossam

[BrunoViera]

hello, try with the initialCountry in lowercase

[hossambarakat]

Thanks @BrunoViera I am already using initialCountry with the right casing.

[jackocnr]

@hossambarakat I'm not familiar with react-hook-form, but it looks like the Controller component you're using is for working with controlled inputs, and our react plugin is very much an uncontrolled input.

As an experiment, if you comment out all of the react-hook-form stuff, does it work then?

[jackocnr]

Closing due to inactivity.