-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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
Advise: Multiple instances of intl-tel-input getting loaded, causing global "window" collision #1577
Comments
Wow, I guess this plugin is a victim of its own success! 🎉 It's an interesting problem. I like the idea of borrowing from jQuery's Additionally, if you load the utils script, it defines its own global: // utils.js
if (window.intlTelInputUtils) {
window.intlTelInputUtilsBackup = window.intlTelInputUtils;
}
window.intlTelInputUtils = {...}; And then in the plugin code: // onload handler (e.g. we've just finished loaded the utils script, which has defined window.intlTelInputUtils)
if (noConflict) {
window.intlTelInputUtilsPostama = window.intlTelInputUtils;
// if a backup exists, then restore it
if (window.intlTelInputUtilsBackup) {
window.intlTelInputUtils = window.intlTelInputUtilsBackup;
}
} Then we'll need to update all of the references to these globals in the code e.g. this.globalsName = `intlTelInputGlobals${this.options.noConflict}`;
this.utilsName = `intlTelInputUtils${this.options.noConflict}`;
// existing code using these globals
window[this.globalsName].loadUtils(...);
// and
window[this.utilsName].formatNumber(...); And then if you access these globals in your own code, then... well you know what they're called! |
Unfortunately, since we currently offer the static method |
Ahh okay, thank you for letting me know that, and for your detailed response. |
I've just released v21.2.5 which includes a little fix, so from now on, it should still work fine if there are two plugin scripts on the page at the same time, as long as they're both using the same version of the plugin (starting with this new version). So if you can upgrade to this version in your own code, and get leadconnectorhq to do the same, then things should work ok. Then at least you have a way of making things work for now, until we're able to do the full |
In v22.0.0 I've removed all of the globals vars, so if you upgrade to that version, it should no longer clash with any older version on the same page. Let me know if you have any issues. |
Thank you for your excellent work on this library and on its maintenance. This is not a bug, nor a feature enhancement, but looking for advisement.
We have a page on our site that uses intl-tel-input. Recently, a 3rd party widget was added (https://www.leadconnectorhq.com/) which also uses intl-tel-input.
The problem is, that both scripts get loaded, and therefore both load
window.intlTelInputGlobal
. This conflict is causing one of the two to always break, since each version has one instance.What options do we have at an implementation level? Are there ways we can avoid this clash?
I can see two possible solutions at a library level, which would both require changes (so non-ideal):
window.intlTelInputGlobal
, and if it already exists, don't re-initialize. This seems like it could cause versioning problems if there are multiple different versions getting loaded though.The text was updated successfully, but these errors were encountered: