Disable and remove autoFormat feature

I have been back and forth about this a lot - I spent a lot of time implementing the autoFormat feature and fixing bugs, and I think it’s a super cool feature, BUT I think it’s time to disable and remove it for the following reasons:

• First and foremost, we are hacking libphonenumber to get this to work, which is dangerous. It was not made for this purpose, they do not support our use case, and they have explicitly advised us against using it this way.
• When the user types we have to call preventDefault so we can control what happens, but this means we lose a bunch of useful native events like change and input, which other devs may depend on.
• Last time I checked, autoFormat didn’t work in Android Cordova apps, or in IE Mobile (see Browser Compatibility section of readme). Who knows what other browsers/versions/platforms make it not work properly.
• There is no way around this incredibly counter-intuitive UX issue: https://github.com/jackocnr/intl-tel-input/issues/322 where you cannot type the first character from the placeholder. This affects 49 countries including the USA - see https://github.com/jackocnr/intl-tel-input/issues/346#issuecomment-183771143.
• Another minor issue: even if we find a fix for the above issue, it will lead to a new one: when a country placeholder starts with a formatting char (e.g. US starts with an open bracket), if you press that char to try and start the number, you will get a red flash as that is not an accepted key, but then it will still add the char because autoFormat does a lookahead and adds any upcoming formatting chars on each keypress, which leads to a confusing experience.
• Then there’s all the issues we have already come across, which suggests to me that there are so many more we don’t yet know about. We get bug reports for the popular countries, but much less for the unpopular ones, which means most likely they are buggy and we just don’t know about it.
• Finally, restricting what the user can do in a regular <input> is considered bad practice by a lot of people (I have yet to find an example of Google or Facebook doing anything like this). As we have seen, this approach is very prone to bugs, and when there are bugs it can completely ruin the UX, or even render the whole input useless. It’s a very dangerous approach.

Notes

• We should still keep a formatNumber function available, which should be used with setNumber etc.
• This change would render the allowExtensions option useless, so we would remove that too.
• This change would also close issues: https://github.com/jackocnr/intl-tel-input/issues/190, https://github.com/jackocnr/intl-tel-input/issues/262 and https://github.com/jackocnr/intl-tel-input/issues/322
• Another perk is that this should significantly decrease the file size of the plugin.

I’m open to discussion, but at this point I’m pretty convinced, and would welcome a pull request that implemented this change.

[jackocnr]

Implemented this change in v8.0.0.

RIP autoFormat ❤️

[multiwebinc]

Here’s the code @chatis provided above without jQuery since the library no longer requires it:

const telInput = document.querySelector("#telInput");

var iti = window.intlTelInput(telInput, {
      utilsScript: "/js/intl-tel-input/utils.js",
      preferredCountries: ['AU'],
      nationalMode: false,
      formatOnDisplay: true // SET THIS!!!
    }
);

telInput.addEventListener('keyup', formatIntlTelInput);
telInput.addEventListener('change', formatIntlTelInput);

function formatIntlTelInput() {
    if (typeof intlTelInputUtils !== 'undefined') { // utils are lazy loaded, so must check
        var currentText = iti.getNumber(intlTelInputUtils.numberFormat.E164);
        if (typeof currentText === 'string') { // sometimes the currentText is an object :)
            iti.setNumber(currentText); // will autoformat because of formatOnDisplay=true
        }
    }
}