Holding backspace (key repeats) breaks flag updates.

[FesterCluck]

I'm editing this issue because the original was pointless. The root issue is that when backspace (and likely delete for mid-string) is held and repeats, the setNumber function, and ultimately _updatgeFlagFromNumber functions never get called. This is because neither keypress or keyup seem to get fired.

[jackocnr]

So if I understand you correctly: you're setting the defaultCountry to US, so when the user first sees the plugin, it shows the US flag and a US phone number placeholder. Then the user selects a different country, and then types in an american number and expects it to work?

That doesn't sound like something we should be worried about, but maybe I'm missing something? You mentioned clearing the input, but what value was already there? Can you walk me through the exact steps that you feel lead to a confusing experience? Cheers.

[FesterCluck]

I've just realized the control already does what I'm describing a need for. However, the behavior breaks if one holds the backspace key to delete all the numbers instead of tapping backspace.

The bug is here: https://github.com/Bluefieldscom/intl-tel-input/blob/dbd367259d51ced692699629964aa076e46aa305/src/js/intlTelInput.js#L354-L435

The backspace, when held, isn't triggering your keypress or keyup calls (at least not in Chrome where I tested).

[jackocnr]

For me, the keyup event fires when you release backspace, even after holding it down for a while.

Can you give an example of a number you enter, then you press and hold backspace, and then what you expect to be left in the input, and then what is actually there?

[FesterCluck]

I made a video for you. http://youtu.be/DYqEPsxYzbQ The behavior when holding backspace seen from 0:47 on is the problem. The flag doesn't change back to the default. I've hacked in a fix on my app, but it's not how it should be done.

0:14 Normal Behavior, US Number, Tap Backspace 0:30 Normal Behavior, Brazillian Number, Tap Backspace 0:47 Bad Behavior, Brazillian Number, Hold Backspace

[jackocnr]

A ha! Keyup is firing, but only at the end, when the input is empty, so it doesn't do anything. The reason the flag changes back to US when you do individual backspace presses is when the input value gets down to just a plus: the logic is: if the number contains a plus that means we need to check the right country is selected, and that defaults to US.

I'm not sure I want to change this behaviour. If you select Brazil and type a Brazilian number, then you just want to delete the whole number you just entered, I'm not sure if it makes sense for the flag to change - maybe they want to type another Brazilian number!

In the case of deleting individual characters, I think we have to update the flag every time otherwise the input value/selected country could get in an inconsistent state. The only question with that is what it defaults to when it gets to just a plus. Currently it defaults to the defaultCountry option (which if unset during initialisation, is just the first country in the list), the alternative is that it defaults to the most recently selected country.

[FesterCluck]

I can see your point. I'd argue that a user choosing the flag with the dropdown should behave more strongly than the flag being auto-changed due to entered data. This is why I earlier had suggested putting this behavior behind a setting. However, IMHO, if the user uses the dropdown to change the country, deleting all characters should NOT change the country. If the country selection hasn't been manually modified, deleting all characters should revert the flag back to the default/preferred country (whichever it's using).

[jackocnr]

I definitely agree with "if the user uses the dropdown to change the country, deleting all characters should NOT change the country". In terms of implementation, this will mean keeping track of the last selected country, and if they go down to just a plus, we revert the country selection to that stored country.

As for "If the country selection hasn't been manually modified, deleting all characters should revert the flag back to the default country", I'm not sure I agree that we should treat this situation differently. In fact I think it's confusing/inconsistent to treat the two situations differently. If they have changed the flag to Brazil by typing +55 then I think it makes sense to stick with that flag unless they type another country code.

[FesterCluck]

Let's start by charting the current expected behavior. I believe this only involves defaultCountry and preferredCountries.

defaultCountry:'xx' Country starts as value given

defaultCountry:'auto' Country is calculated via a service,

defaultCountry:'' Country is set to the first item on the list.

preferredCountries:['xx'] Used to set the first country on the list.

This means that, overlooking the backspace issue, that the current control works as I expect it to. We set preferredCountries:['us'], and as the characters are removed the flag works its way beck to being the first flag on your list.

I cannot find any valid use case for a user being able to enter a number in their own local format against author's intended context. Anything beginning with a + will automatically update country, the input does not allow manually typing spaces or parentheses, and the typical final value collected from these inputs is an international E164 formatted number. Being that nationalMode formats are by their definition "locally understood" formats, in what case does it make sense to allow the final dataset collected to be a collection of locally formatted numbers? IMHO it would be confusing, but it's an earnest question.

[jackocnr]

I'm sorry but I don't understand the last paragraph at all. I thought we were just talking about updating the selected flag, but you don't seem to mention that at all.

in what case does it make sense to allow the final dataset collected to be a collection of locally formatted numbers?

I don't understand where you got this from, and why it's relevant? I'm not suggesting you save numbers in a local format... if you use getNumber it defaults to full international format. I'm confused.

[FesterCluck]

I'm afraid I made some assumptions and forgot to mention them. The end problem we're experiencing isn't just the flag, but the nationalMode format that comes along with the country code change.

The bug regarding the backspacing leads the formatting of the phone number to get stuck in the same mode until the dropdown is changed. Typically, if one deletes out the number, the flag & the number formatting will change back to the first country on the list. When one holds backspace (or highlights the entire string and backspaces I've found) the country selection remains as whatever was detected during typing. (We'll use Brazil in this example as per my video). Now whenever the user types in a number again (assuming they're typing in a US number, as in my video) it will be nationalMode formatted for Brazil.

Intended Number: (214) 444-3456 Actual Result: (21) 4444-3456

[FesterCluck]

Note though, there is nothing wrong in the formatters, they're doing as expected. The only problem I see is an inconsistency in the way the input decides on the country code. Because the idea of nationalMode is usually going to come up when an implementer is trying to support their own national format + International (ie: Don't make local users type in their country code), one needs a way to be sure that clearing the input will always default back to a specific country code. Right now I can't get that sort of behavior.

Do you agree that the backspacing code is incorrect? If so, we can work on fixing that and my issue will come with it. If you are satisfied with the backspace behavior, would you mind if I offered up a pull which would contain a config property to make nationalMode more consistent? For those of us using this on business forms, we're trying to avoid support calls, which means catering to users which get confused by seemingly very simple things. In all honesty, I subscribe to this method of UI design: [https://www.youtube.com/watch?v=r2CbbBLVaPk, The User Is Drunk]

[jackocnr]

Is it true that your logic can be summarised as: when the input is cleared, the flag reverts to the last selected flag?

So if you init the plugin with America selected, then typing +55 to select Brazil, then clearing the input, it goes back to America. But then if you select Brazil from the dropdown and type something then clear it, it stays on Brazil.

Is that correct?

[FesterCluck]

That behavior sounds perfect.

[jackocnr]

Ok, but to come back to the video you posted, the situation that you are concerned about is this: you init the plugin with America selected, the user types +55 which changes the flag to Brazil, but the user is actually American and when they clear the input, they expect it to go back to America so they can enter their American number. My question is: why would they type +55 in the first place?

[FesterCluck]

When it was originally reported to me it was not done on purpose, it was typed by accident. The user was for some reason confused by the flag drop down, didn't understand what to do to switch it back.

[jackocnr]

I don't understand how someone could type a plus and then a valid country code by accident - the fact that they typed a plus at all means they were trying to type an international dial code. Once you decide to do that, even if you type the wrong country code you should be able to go back and correct it to the right one (+1 if you have an American number) which would then select the right flag/formatting.

But I've thought about it and I think the most "drunk-safe" way to do it is how you want. Fixed in v5.2.0. Please let me know if you have any issues.

[saichandan726]

how to update the selected flag constantly...when we delete the number of particular falg the drop down of flag should stay in the particular flag what we have selected... for this updating the falg is the solution????