[React] Placeholder breaks upon calling `setNumber`

[cabello]

Hello there 👋

Plugin version

23.1.0

Steps to reproduce

This is using the React component.

1. Use the ref to set the phone number
2. Clear the phone number field manually with backspace
3. Placeholder no longer auto-formats upon country change

Expected behaviour

Placeholder to change upon changing country.

Actual behaviour

Initialisation options

const inputInitOptions: SomeOptions = {
  autoPlaceholder: "polite",
  containerClass: "w-full",
  countryOrder: ["US", "CA", "GB", "AU"],
  placeholderNumberType: "MOBILE",
  validationNumberType: "MOBILE",
}

Minimum steps to reproduce

import IntlTelInput from "intl-tel-input/reactWithUtils"

// ...
const phoneInputRef = useRef<IntlTelInputRef>(null)
// ....

useEffect(() => {
    if (data) {
      if (phoneInputRef.current) {
        phoneInputRef.current.getInstance()?.setNumber(data.phoneNumber || "")
      }
    }
  }, [data])

// ...

return <IntlTelInput
            ref={phoneInputRef} ... />

Thank you for making this project :purple_heart:

[jackocnr]

Thanks for the clear and detailed write-up! I don't have time to look into this myself right now (likely until late next week), but just pinging @BRAiNCHiLD95 who has been really helpful with this stuff in the past, just in case he has any ideas!

[BRAiNCHiLD95]

@jackocnr Thanks for reaching out! Managed to squeeze in a codepen repro between my Canada Day weekend celebrations!

@cabello I've tried (and failed) to reproduce this in a codepen. I can see the placeholder auto-update every time.

I've taken all numbers from quackr.io and also kept in some of the validation and helper functions I have previously used - (just a helpful button to test add one number per country in your list of initOptions).

There may be a difference in terms of how/when "data" is updated in your codebase. Feel free to make a fork/new codepen that shows us the error - would be easier for us to debug.