-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Disable and remove autoFormat feature #346
Comments
I should preface this by acknowledging that I am not a domain expert on international phone numbers. I had not been exposed to E.164 before encountering this library. So what I assume to be sensible about how to deal with input issues comes from an engineering perspective, feedback from my own users and what experience I have with numbers in my own nationality. I'm disappointed with the feedback we've gotten from libphonenumber about the problem of local formats. While I greatly respect their commitment to comprehensive and accurate metadata, I think they're limiting the practical applicability of their AsYouType formatter by only shipping it in a configuration that supports every configured format. There may be real world use cases internal to Google and elsewhere that benefit from that broader behavior, but if your goal is a full, standardized, unambiguous number then being able to choose to exclude local formats is a useful option to have when soliciting user input. My impression is not that they have rejected this line of reasoning so much as that they are satisfied with what they have and not interested in changing it. It would certainly take some work on their part to do so, and there may be more nuanced reasons from their experience why an E.164 subset for input wouldn't work out. Regardless, they've apparently chosen not to engage and that's their prerogative. I don't want to put words in anyone's mouth though; if I'm misinterpreting then I'm glad to hear more on the subject. What I would argue is that the problem with the AsYouType formatter as it's being applied in intl-tel-input is not with the component itself, but with the data set it's operating on. The widget is clearly built to be metadata-driven, and concerns with specific formats can be cleanly and thoroughly addressed by removing those formats from the metadata file that it's compiled with. I don't think it's in any way an abuse of the formatter or broader library in the context of intl-tel-input to deploy only a subset of its metadata. It might be presumptuous to assume that we can identify all problem formats in an automated way without formal support for that interpretation by libphonenumber (though I suspect we can make a reasonable guess), but if someone seeking an E.164 result wants to remove known problem formats, then I don't see anything wrong with it aside from the hassle of maintaining those curated changes through releases of libphonenumber. The as-you-type formatting capability adds some complexity and weight to intl-tel-input, but it enables support for unified extension input, and I think it's one of the distinguishing features of the widget. Libphonenumber is amazing as an abstract resource, but seeing it brought to life in intl-tel-input is just awesome, and the way the formatter works, when it works, is a real delight. I think it has practical value for the user as well, particularly for line-of-business situations where the user may not be familiar with the format of numbers in the country in question. I agree that the UX problem of unwanted formats causing confusion is a serious one, but I've been able to address that satisfactorily so far by just removing those formats in the build that I use. Nothing's going to prevent anyone who likes and depends on these features from forking and continuing to maintain libphonenumber releases on their own branch, but I think the library is stronger with them if there's a reasonable solution for restricting the formats. |
Thank you for taking the time to write that. It's very encouraging to have someone feel so strongly about it. If we have people like you who are willing to put in the time to make this work, and we write a lot of tests to protect ourselves, then I think I would feel comfortable keeping autoFormat for now :) |
As per my comment here, I have decided to remove the This libphonenumber issue is about specifying a format: https://github.com/googlei18n/libphonenumber/issues/907 And this one talks about the 3 digit minimum: https://github.com/googlei18n/libphonenumber/issues/527 |
Implemented this change in v8.0.0. RIP |
I'm sad to see this leave.. I thought this was an awesome bit of functionality. |
Yes I'm sad too. But I've just done a bit more research, and it was actually broken for 49 countries including the USA. Here's the list (when nationalMode=true and numberType=FIXED_LINE, these countries' placeholder started with an open parenthesis, which the user couldn't type): American Samoa: (684) 622-1234 |
Oh and one more note for people reading this thread: one alternative is to use the |
Hello! I just wanted to say, that we are extremely disappointed and frustrated that you've decided to drop the support for phone number formatting. For us, this is the most useful feature of the Actually, I'm not sure I can see the rational ground for this decision. As you stated in the documentation I can't comprehend why you've decided to remove the entire feature when only The 1). Is it possible to disable this feature for only affected countries and preserve it for others? 2). If you really want to remove this functionality from the core package maybe we can re-introduce it as additional plugin? I.e. implement an extensible interface and use it to add this feature back. That way, the developers which wanted to have this functionality can have it by installing the additional JavaScript-file (even from remote repository). We are very concerned with this problem and would really like to find a way to save this feature. Thank you! |
@slavafomin first off, let me join you in lamenting the loss of this feature - I put a lot of time and effort into it and trust me it was a difficult decision to remove it. Regarding your suggestion to disable the feature just for the 49 broken countries - unfortunately that is not the only problem. It is broken for all countries on certain browsers, and for certain native events, and then there's the fact that the implementation is fundamentally a hack on an external lib who's maintainers have explicitly advised us against using it this way! If you want to work on an additional plugin that adds this functionality then that's up to you, but as for having it in core: either we find a way to fix it for all countries (ideas welcome), or we leave it out. |
I'm sorry I'm not sure how it's all working together. What exactly are we using from Google's library? I do believe it's data and formatting logic. What if we extract the required data from the original database and then implement the formatting logic ourselves? What's your estimate on this would it be hard to implement? |
The asyoutypeformatter is here. As you can see, it's not a trivial component. My suggestion was to just modify the metadata it runs off of to get rid of unwanted variations. That turned out to be fairly effective, but there was still a lag problem where it wouldn't immediately accept or recognize the example format displayed in the placeholder text until the user had typed a few raw digits. The owner (who is entitled to his opinion) decided to draw the line there, and here we are. v8 is a breaking change that I don't have time to address in my own application right now, so I'll be maintaining a v7 fork with the mitigations described in my PR for the short term. Unless we see an official solution from the libphonenumber side (which doesn't seem likely), a separate plugin project may be the best long term approach. It would have to maintain its own utils.js which is unfortunate, but there's no reason it couldn't bolt as-you-type and extension behaviors back on with keyboard events as long as you're tolerant of some edge cases. |
@slavafomin we use a custom build of Google's libphonenumber for formatting/validation/placeholder numbers, which you can read about here: https://github.com/jackocnr/intl-tel-input/blob/master/src/js/utils.js. @nlwillia has been very helpful in discussing this issue with me and coming up with ideas to try and get the If you guys have any questions about how anything works, or if you want to discuss any ideas, feel free to reach out. I would be thrilled if you found a reliable way to make this work for everyone! Yer I think a separate project focusing on the utils.js file would be valuable. One that either found some clever way to manipulate libphonenumber to do what we need, or one that just copied the logic and then was maintained in-house. |
I personally think this was more a problem with the placeholder, than the actual autoFormat feature itself. I completely removed the placeholder in my implementation in June of last year, for this same reason - the placeholder implied that you could type parenthesis and dashes. I really don't think we need the placeholder (Google doesn't use one), especially if having it requires such a massive change. I'd prefer to keep autoFormat implemented, but simply hide the placeholder if it is enabled (or something as simple as "10 digits" so the user knows how many numbers to type). I was deep in another project when these discussions were going on, otherwise I would've weighed in sooner. This just seems like a major change that's going to create a lot of extra work for many of the developers who use this plugin, to fix what is (as far as I can see), a pretty minor problem. |
@caseyjhol thanks for weighing in. I really appreciate hearing everyone's opinions. Regarding your suggestion to disable the placeholder: it's a matter of taste - I personally think placeholders are very useful. And removing the placeholder wouldn't solve the problem anyway - a lot of people will still try to type an open parenthesis as the first character and get a red flash, which is still bad UX. Then there's all the other points I raised in my first comment e.g. hacking libphonenumber (which makes it unsupported and bug-prone), broken native events, unsupported in some browsers, other bugs, and a lot of people's opinions (including my own, and Google's for that matter) that you should not restrict what the user can type in an input - it's unexpected and can create a bad experience. |
The only question that should matter for autoFormat (or any feature) is: How does it affect and improve the user experience? Let's review:
|
is there any example on how to use formatNumber from utils.js? |
This code was based on riotjs but it should give you the idea:
The |
How to get country with double zeroes? |
Another vote for restoring this feature some how. 99% of usage on my apps are US only. I'd love to use this plugin but auto-formatting is a must 👍 |
It could help someone, I use the jQuery Plugin MASK for doing that.. and working very well I use my code like this
|
i prefer to not use hacked libphonenumber just use cleave js
|
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
}
}
} |
Thanks @multiwebinc it worked for me |
Be careful. This will not work with nationalMode: true. |
It's back baby! 🎈
I thought of a workaround for the issue where the placeholder number in the US (and other countries) starts with an open bracket, but then it wont let the user type that character first. Annoyingly this is (still!) an issue with libphonenumber, as for some reason they auto-format the number differently to that (just hyphens until you hit 8 digits - don't ask!). BUT my workaround is this: if the user does decide to type their own formatting chars (e.g. an opening bracket), then we simply disable auto-formatting for them. I figure if they want to type their own formatting chars then let them. Or if they don't want to bother then we'll do it for them. In general, this approach of allowing the user to type whatever they want solves a lot of the concerns I raised before, as we're not preventing the user from doing anything. Also we're no longer calling One factor in re-adding this feature after so long is that I have started to see it be used by the big players e.g. Stripe (more info in this comment), and also Google Contacts (who do something similar to us - if the user types a formatting char, they just disable auto-format). Also since I see so many people hacking this together themselves in ways that will be super buggy (e.g. by calling Feedback is appreciated, though please start a new issue if you find anything. |
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:change
andinput
, which other devs may depend on.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.<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
formatNumber
function available, which should be used withsetNumber
etc.allowExtensions
option useless, so we would remove that too.I'm open to discussion, but at this point I'm pretty convinced, and would welcome a pull request that implemented this change.
The text was updated successfully, but these errors were encountered: