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.

[jackocnr]

I'm really sorry - I seem to have forgotten to reply to this one, and I see it's now over a year old - forgive me!

I'm guessing this is no longer a pressing issue for you, but in case it's helpful, a few thoughts: you're importing the component from reactWithUtils, so there's no need to use loadUtils as well as you already have it.

Then there's your useEffect, which seems to be loading utils again (a third time!) - you can safely get rid of this.

As for your handleCountryChange method - you seem to be manually trying to update the placeholder yourself - again, I would just get rid of this code as the plugin does this for you automatically.

If you're still having issues, I would suggest updating to the latest version, and if the issue is still happening, create a codepen (etc) to show the problem so I can help debug it. For your reference, here are the react component docs and the react example page.

Again, apologies for missing this. All the best.