Padding issue when initialise with separateDialCode on hidden input

[jackocnr]

Originally posted by @crabnky in https://github.com/jackocnr/intl-tel-input/issues/885#issuecomment-487786957

Originally posted by @mac89 in https://github.com/jackocnr/intl-tel-input/issues/885#issuecomment-496980252

https://codepen.io/mac89/pen/gJJBLR

This issue is caused when the element is hidden when the plugin is initialized causing the offsetWidth to be 0.

My proposed solution is this:

var el = this.telInput;
while ((el = el.parentElement) && !el.classList.contains("intl-tel-input"));
var clone = el.cloneNode(true);
clone.style.visibility = "hidden";
document.body.appendChild(clone);

var selectedFlagClone = clone.getElementsByClassName("selected-flag").index(0);
var offsetWidth = selectedFlagClone ? selectedFlagClone.offsetWidth : 0;

// add 6px of padding after the grey selected-dial-code box, as this is what we use in the css
this.telInput.style.paddingLeft = "".concat(offsetWidth + 6, "px");

[mac89]

You want me to create a new pull request?

[jackocnr]

Thanks very much for reporting this bug and creating the codepen. Unfortunately I find the proposed solution to be too complicated, as this is an edge case IMO.

Can I ask: why do you need to initialise the plugin before you show the input? Wouldn't it be better to just initialise it after you show it?

[mac89]

I'm using JQuery Mobile and when a page is loaded by it through ajax, the content (including your plugin initialization) is first rendered before the page is actually shown. I'd have to listen for a pageshow event every time I want to include a tel input and there is the possibility that the input would look off during the page transition.

[jackocnr]

Ok then I am open to a PR, but with a few changes:

• First, I'd like to only run this workaround code if we need to, so only if (A) the input is hidden and (B) separateDialCode is true
• Instead of cloning the whole .intl-tel-input container and all of it's descendants (including the hundreds of countries in the list!), can we just do a shallow clone of the .intl-tel-input container, and then inject into that a deep clone of the .selected-flag element (I don't think we need to worry about the .flag-container element). You can access the container with this.telInput.parentNode - no need for a while loop there, and then with this implementation you will have direct access to the cloned selectedFlag element, so you wont have to query for that.
• I don't think you need that check if the selectedFlagClone exists, do you? I think you can just assume it does.
• Please can we stick with the existing ES6 string interpolation on the last line

Thanks very much.

[mac89]

• I'll do that.
• I'll do that too, except the loop is required in cases where the input gets wrapped by another plugin. Again in JQM, inputs are wrapped as you can see here: https://www.tutorialspoint.com/tpcg.php?p=Oi68q2
• I could but the tests fail if I leave the check out. I'm not familiar how the test framework deals with the body element.
• My mistake, I copied it from the generated code.

[jackocnr]

the loop is required in cases where the input gets wrapped by another plugin

If you have other plugins that are manipulating the markup around the input then you should make sure those get run before you intialise this plugin else you will get styling problems as this plugin's container really needs to be the parent of the input element.

So I have merged your PR (thank you so much), but I have removed that loop code in a followup.