Autoplaceholder React component functionality

[IkeLongo]

Hello!

First off, I want to say thank you for creating intl-tel-input—it’s been incredibly helpful, and I appreciate all the effort that has gone into maintaining this repository!

I’m currently using the intl-tel-input React component and trying to implement auto-placeholder functionality based on the selected country. However, I’ve run into an issue where the placeholder always remains set to the U.S. format, regardless of the selected country.

Here’s my component implementation:

<IntlTelInput
    inputProps={{
      className: "bg-[#f4f4f5] text-heroui-foreground-500 py-4 border-2 border-gray-300 focus:border-gray-300 hover:border-gray-400 rounded-medium shadow-xl placeholder:text-gray-500 text-sm placeholder:text-sm",
      name: "phone",
      placeholder: placeholderText,
    }}
    ref={phoneRef} // Attach ref here
    onChangeNumber={setNumber}
    onChangeValidity={setIsValid}
    onChangeErrorCode={setErrorCode}
    onChangeCountry={handleCountryChange}
    initOptions={{
      initialCountry: "us",
      separateDialCode: true,
      strictMode: true,
      autoPlaceholder: "polite",
      loadUtils: () => import("intl-tel-input/build/js/utils.js"), // Ensure utils.js loads
    }}
  />

To ensure utils.js is loaded, I have this useEffect:

useEffect(() => {
  const loadUtils = async () => {
    try {
      await import("intl-tel-input/build/js/utils.js");
      console.log("Loaded utils.js");
    } catch (error) {
      console.error("Failed to load utils.js:", error);
    }
  };

  loadUtils();
}, []);

And here’s my handleCountryChange function:

const handleCountryChange = (countryCode: string) => {
  if (phoneRef.current && (phoneRef.current as any).instance) {
    const itiInstance = (phoneRef.current as any).instance;
    const newPlaceholder = itiInstance.getNumberPlaceholder();
    setPlaceholderText(newPlaceholder);
  }
};

Related imports are the following:

import IntlTelInput, { IntlTelInputRef } from "intl-tel-input/reactWithUtils";
import "intl-tel-input/styles";

Despite this setup, the placeholder text doesn’t update when the country changes—it remains in the U.S. format. I could continue troubleshooting, but I figured it would be best to ask the experts who built it!

Is there anything I might be missing to enable auto-placeholder updates properly?

Thanks in advance for your time and help! I appreciate it.