country selected reset when starting typing number

[fabien-tanguy]

I have tried your very usefull component, unfortunately I have an issue while testing it in a basic create react app (empty one).
First I choose a country in the select then as soon as I type numbers in the input, the selected country disappear to let show the worldwide fallback icon.
I use this sample test :
<Phone smartCaret={false} placeholder={"any phone number"} value={ this.state.value } onChange={ value => this.setState({ value }) } displayInitialValueAsLocalNumber={true} />
Hope you can reproduce it.

[catamphetamine]

Hope you can reproduce it.

Not until you post the exact reproduction steps.

[fabien-tanguy]

I reproduce this issue on both Versions 1.0.11 and 1.0.12

1. Select france country or set country props to 'FR'
2. The french flag is well selected
3. Focus on the input field
4. Type e.g : 06
5. The selected french flag disappears to let the fallback icon
6. Input value becomes +336
7. Once the phone number is correct e.g : 0610101010,the french flag appear again

On the first sample of your demo page, once you have selected a country, during typing the selected country is never unselected which is normally expected.

I have already used your component by the past and it was working like a charm.

[catamphetamine]

5. The selected french flag disappears to let the fallback icon

It doesn't for me:

[catamphetamine]

On the first sample of your demo page, once you have selected a country, during typing the selected country is never unselected which is normally expected.

Yes.
You can fork the repo, switch to the gh-pages branch and modify the demo index.html until you reproduce the bug.
If you reproduce it then you can post the link to your forked gh-pages branch.

[fabien-tanguy]

Hi, the bug is reproductible on gh-pages branch when I upgrade to react 16.
Have a look : https://github.com/fabien-tanguy/react-phone-number-input/tree/gh-pages
hope it helps

[catamphetamine]

I see, so React changed getDerivedStateFromProps() which in turn broke the component
https://reactjs.org/blog/2018/05/23/react-v-16-4.html#bugfix-for-getderivedstatefromprops

They called it "bugfixing" but instead they broke it.
Details: facebook/react#12912

We'll see how it goes.

[catamphetamine]

Ok, they just close issues and blame developers for their code being so-called "buggy".
I guess React doesn't respect SEMVER anymore and one shouldn't update react package.
I'll still find a way to fix this React bug though.

[fabien-tanguy]

Yes indeed they do not respect SEMVER anymore.... can't believe it. Anyway I'd like to thank you for your reactivity,
good job guy

[catamphetamine]

@fabien-tanguy Nah, I'm just having fun with them )
Don't take my accusations too seriously.
React team are good guys.
They've been pushing a lot of controversial changes recently but it's good because React is evolving again instead of just "dying off" like yet another used-to-be-popular framework.
Thx.

[fabien-tanguy]

Sure, they are good :)

[catamphetamine]

Fixed in version 1.1.1.
Also PhoneInputNative exported component has been added (same as nativeExpanded in 1.x).
I personally think native <select/> is better because it doesn't require any 3rd party JS and CSS.

[clementAC]

Hi,
I still have the problem on v1.1.7.
What is the exact component to use?
I use this one

import PhoneInput from 'react-phone-number-input/native'
<PhoneInput
            country={this.state.countryCode}
            countries={["FR","ES","CA","US"]}
            id="telInput"
            ref={node => {
              this.keyboardRef = "#telInput";
              return 0;
            }}
            onCountryChange={(value)=>{this.setState({countryCode:value})}}
            placeholder={this.props.placeholder}
            value={this.state.value}
            onChange={(value)=>{this.handleChange(null,value)}} 
            />

I don't want to use the component with externals dependencies on select

[catamphetamine]

@clem91 What's your exact issue?

[clementAC]

The same described here. When I start typing numbers on input, the selector change and display the first flag in his list.

[catamphetamine]

Provide a visual demo (a gif or a video)

[clementAC]

[catamphetamine]

@clem91 You could try cloning this repo, switching to gh-pages branch and reproducing the bug there.
If you reproduce it there then I could have a look.