search

jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. React and Vue components also included.
https://intl-tel-input.com
MIT License
7.67k stars 1.95k forks source link

[React] Placeholder breaks upon calling `setNumber` #1681

Closed cabello closed 4 months ago

cabello commented 4 months ago

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

CleanShot 2024-06-28 at 11 00 21@2x

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 commented 4 months ago

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 commented 4 months ago

@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.

jackocnr commented 4 months ago

Thanks so much for your input here @BRAiNCHiLD95 šŸ™

As you say, it seems to be working as intended in your codepen, so without the op's further input, we can only assume it is some of their own custom code causing the problem.

Closing due to inactivity.

cabello commented 3 months ago

Turns out the issue was on our codebase. AFAIK intl-tel-input is "uncontrolled", it tracks the data changes itself and has a few callback bridges to React land.

We were rendering the input once with empty values, then a second time with some values and changing a few props, that was causing unexpected behaviour, like the flag not showing up, formatting not working as expected.

Once I changed the approach to only render the input once I have all the data necessary to give to it, everything works as expected! šŸŽ‰

Thank you for this library, it's awesome šŸ¤—