After spending a considerable amount of time troubleshooting, I wanted to share a workaround for a persistent issue with Airdev’s International Phone Input plugin.
As some users have noted in the plugin reviews, while the Airdev’s International Phone Input plugin is fantastic (I tried many alternatives with little satisfaction), it has a significant flaw: when used multiple times on the same page (such as editing multiple Things’ phone numbers in a pop-up), the default value only works correctly for the first Thing.
The Problem:
When you have several Things on the page (repeating group or not), and you edit one Thing, you load the Thing’s data into a pop-up and display the pop-up. In the pop-up, you use the International Phone Input plugin, setting its default value to the Thing’s phone number.
The first time you open the pop-up, everything works fine: Thing A’s phone number loads correctly in the plugin, allowing you to modify or keep it.
If you close the pop-up without saving and then open it again for a different Thing (Thing B), you encounter a problem: the phone number in the plugin still shows Thing A’s phone number instead of Thing B’s.
The Solution:
To prevent this issue, you need to add two extra steps to the workflow when editing a Thing’s phone number:
Load the Thing’s data into the pop-up.
Extra Step 1: Set a dummy state with the value of the Airdev International Phone Input plugin (I named this state “honeyPot” to indicate it is just a temporary holder).
Extra Step 2: Use the “Reset relevant inputs” action.
Show the pop-up.
Step-by-Step Workflow:
Load the Thing’s data: Ensure the plugin has the new data available to reset its default value when it will need to do so.
Set a dummy state: Force Bubble to “use” the plugin value (even if not previously used because the user did not update anything).
Reset relevant inputs: This action refreshes Airdev’s International Phone Input plugin to its default value, now reflecting the new Thing’s phone number (because of step #1).
Show the pop-up: This initializes Airdev’s International Phone Input plugin with the new Thing’s phone number.
Notes:
This solution is applicable in reusable elements and any scenario where the Airdev International Phone Input plugin is used multiple times on the same page.
The order of the steps is crucial for the solution to work correctly.
There is currently a bug with the reset function in bubble plugins that causes this plugin to throw an error and likely is leading to the reset issues you mentioned.
Also, FYI, Airdev is using a version of the intl-tel-input js plugin that is about 1.5-2 years old. This may not be an issue for you, but it also means that that they are not using the latest versions and changes that any countries have implemented in their phone formats via libphonenumber. These changes happen often.
I would reach out to Airdev and see if they can update their reset function. Also, I happend to noticed that the Zeroqode recently updated their Phone Number Input + Formatting for the very same reason. We decided to roll our own version of the intl-tel-input js library just because we kept running into issues such as these.
Thank you for your input. I’m not using autobinding, so I don’t think the bug you’re referring to is applicable to my situation.
Regarding the intl-tel-input JS plugin, I appreciate the notification! I’ll keep an eye on this. Currently, I’m satisfied with the delay since I’m targeting a smaller set of countries for an MVP.
I tried the Zeroqode plugin but wasn’t happy with the configuration or the look and feel, so I reverted to using Airdev.
If you think there’s a possibility that I could benefit from your version, please let me know.
Hi @vnihoul77
I’ve been able to use the plugin in a popup.
In my case, the content of the popup is generated in a reusable element but that should not impact the dropdown.
Good luck
Not sure I am following your steps here, however I did find my own solution after a way too many attempts. I expect it will bite me later, but I cant give it anymore time… and is here for my sad reference later when i need to troubleshoot.
I have a state in the popup called “s_userPhone”
the InternationalPhoneInput value default value is set to this state.
I have TWO separate “Do when This CustomDefinition is visible” - one set the state to be NULL, the other sets the state to be the value that i need, in this case the users, user profile phone number.
This works, i dont really know why… sadly… but if anyone else wants a fix for a laptop throwing issue… try it.
I do suspect the microsecond delay does a reset on the values as you mentioned and gives the correct data… just feels like its gonna break.
Thanks for pointing out those issues, we’ve since been working on improving the plugin and just released a new version which should fix all of them
We’ve also taken some time to update the library used behind the scenes, so this new version is up-to-date with their latest release, which also includes some visual improvements! As @andrew mentioned, keeping it up to date is important to make sure the phone validation logic stays correct, but as we’re using their “practical validation” strategy by default, the plugin should be sufficiently precise and future-proof for most use-cases.
Feel free to reach out to plugins@airdev.co in case you have any other issues with our plugins, we’ll be happy to help!
@AirDev The problem I have now is there is no way to reset the input on close.
I have the international phone input inside a floating group that when I close it - resets the data in a group, resets relevant inputs etc. but it wont reset. I even tried watch input on the element to see if they would clear the data (1t watch input) but this fails.
Ive not been able to set a default value of NULL.
Also, the alignment in my case apears off:
Edit: I manage to resolve it [for my benefit in the future] - create a state on the floating group. set the International Phone Input to have this state as a default.
The use a do when this floating group is visible, set the state to NULL (empty) . This seems to resolve it.
hey @AirDev, is there any way to customize the background color of the input? tried through css but wasn’t possible. I know this has nothing to do with the OP question but couldn’t find any other active thread of the plugin
