Shadow DOM and Mobile View issue about intl-tel-input HOT 19 CLOSED

@jackocnr I can confirm that now it's working. Thx.

What should I do with PR? just close or you will close it ?

from intl-tel-input.

I see we reference document.body 5 times in the source JS so we would need to replace all of these. I propose a new bodyContainer option, which defaults to document.body. Would that solve your issue?

from intl-tel-input.

If I have possibility to select a place(element) where I can add "iti-mobile" class, It will resolve the issue.
Because main issue that "init-mobile" class is OUT of ShadowRoot, when I am using int-tel-input.

from intl-tel-input.

Well we're talking about the same thing - adding a new option to pass in a container element. You want this container element to take the iti-mobile class, but while we're doing that, we may as well use it for the other instances where we use document.body in the code, to keep it encapsulated within the shadow DOM. e.g. when you open the dropdown, the code currently uses document.body.scrollLeft to figure out where to position the dropdown, and in your case, this will need to be relative to the shadow DOM instead of the whole document.

I don't have time to implement this myself right now, but I would be open to a pull request.

from intl-tel-input.

Behaviour can be reproduced by changing user-agent in your browser.

If you don't need the popup, you can disable it with the useFullscreenPopup option.

from intl-tel-input.

did you fix this issue ? same btw

from intl-tel-input.

@mimoudix sorry ,I haven't had time to take a look into it, because of holidays :)

but I added temporary fix to my app (web component) to be able to use the lib in mobile view.
Maybe it will be helpful for you:
add this into your code

  let dropdownContainer = undefined;

  const isMobile = /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

  if (isMobile) {

    // add class 'iti-mobile' to the upper element inside shadow dom (not the root) 
    myTopElement.classList.add('iti-mobile');

    // some element, for example DIV which wraps your tel-input, if you don't have one - just add it :)
    dropdownContainer = INPUT_WRAPPER_ELEMENT

  };

intlTelInput(input, { utilsScript, dropdownContainer, separateDialCode: true, });

from intl-tel-input.

@skuzmin is it the same issue ? #1493

from intl-tel-input.

if you are using input-tel inside shadow dom , then yes... that's the same issue

if you are NOT using input-tel inside shadow dom, then it should be something different.

you can easily test mobile view on demo page, it works like a charm :) ( there is no shadow dom ofc)

from intl-tel-input.

@skuzmin can you check from your side ? here is a live demo profily.link/register. Happy holidays !!

from intl-tel-input.

@mimoudix library was update and my issue might be fixed, but I will double check it after New Year.

About your issue, the problem is in styles (CSS).

So you need to update to the latest version and check all your styles ( to be the laster version as well)

In worst case scenario just add this styles to your global CSS:

test on your web app:

P.S. Don't forget to reload page when you switch from desktop to mobile view and back. The library doesn't detect mobile-desktop view change on window resize.

from intl-tel-input.

@skuzmin it worked, thanks!! Happy holidays.

from intl-tel-input.

@jackocnr I have create PR, please check when you have a time ( minor changes)
#1497

from intl-tel-input.

Thanks for putting together the PR, but before I can merge it I need to understand exactly what the problem is here because re-reading our conversation I wonder if I've misunderstood.

My questions for you:

(1) Reviewing the plugin JS, there are several references to global variables. There are 35 references to window, 16 references to document and 1 reference to navigator. Will these references even work from inside a shadow DOM? (if not, the plugin will be hopelessly broken)

(2) Even if they do, my next thought is: does it really make sense to "encapsulate" this plugin in a web component / shadow DOM, when realistically it is not encapsulated at all! It is constantly leaking into the global scope. Do you not think this is a problem?

(3) If you don't think that is a problem, then I don't understand the need for this container class - why not just let the class be added to the document.body, and let the dropdown be appended to document.body (which it is by default, if useFullscreenPopup is true) and it should work fine, no?

(4) Which initialisation options are you using btw?

from intl-tel-input.

hi @jackocnr and sorry for delayed response,

1. window is available in the shadow dom, you can grab data from that object, but you can't set data inside the shadow dom.

2. I don't have a goal to encapsulate or something, I was forced to use MFE ( micro front ends ) on my project right now, and your library is the best in slot for working with phones, that's all.

3. So I will describe it in details. When I add MFE to a some web-site (let's call it CONTAINER), CONTAINER can't affect my MFE using JS or CSS.
   In case of desktop view, I have all necessary css rules inside my MFE(shadow dom), and your lib works like a charm.
   In case of mobile view, the lib moves the country list to the document.body and adds class to document.body, but STYLES for that are inside MFE(shadow root). So we have a case when the lib needs to handle something which exists out of its scope.
   If the lib adds the country list and the class to shadowRoot.body instead of document.body it would work as well .
   Maybe this abstract image will be helpful :

long story short, shadowDom has access to window object ( for instance localstorage) but you can't affect shadow dom from the outside, so that's a reason why I can get your global objects, but styles from CONTAINER can't affect the MFE.
We have a property for the country list, so I decided to create similar for mobile class.

P.S.
Hack which I'm using right now to resolve the issue (yeah Im using little bit older version of the lib with "iti-mobile" class):

from intl-tel-input.

So if I understand correctly, the whole problem is that we put that one class on the body. I've just tried moving it instead to the dropdown container element, which makes more sense anyway. This change was released in v18.4.0 if you want to try it. Does that fix your problem?

from intl-tel-input.

In theory it should fix the issue, without any props and so one, but you will need to rewrite CSS as well. Because if you add the class to the dropdown container this rule will not work:

I have just tested :

should be something like: .iti-mobile.iti--container

from intl-tel-input.

Yeah I did all that 👍

Give it a try and let me know if it works for you.

from intl-tel-input.

I have closed PR.

Issue has been resolved.

from intl-tel-input.