Dropdown does not show inside a prettyPhoto Popup (used by yith-wishlists Woocommerce plugin)

[gitrpbrme]

Plugin version

24.5.0

Steps to reproduce

1. Open link and click "Adicionar ao Orçamento Especial" -> click on "Adicionar ao orçamento especial" in the popup, then on "Ver".
2. Click on Button "Pedir um orçamento especial"
3. The popup opens up with the Intl-tel-input country button, but it's not usable, I can load and set the formatting placeholder, but the dropdown does not show in any way.

Expected behaviour

I expected that the dropdown of countries would show up. I have made it work using regular html and js, but I'm not able to figure out how to open up on this popup.

Actual behaviour

I would expect the dropdown to show.

Initialisation options

List any options you're using e.g. utilsScript or onlyCountries

var input = document.querySelector("#telefonewhatsapp");
        var intl = window.intlTelInput(input, {
//            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.5.0/build/js/utils.js",
            separateDialCode: false,
            initialCountry: "br",
            dropdownContainer: input,
            countryOrder: ['br', 'pt', 'lu', 'de', 'ch'],         
        });
        window.intlTelInput.loadUtils("https://cdn.jsdelivr.net/npm/intl-tel-input@24.5.0/build/js/utils.js");

---

Last but not least, due to this popup, I had other problems with JQuery that I had to use to figure out the option selected on a select, I had to use code var $option = $(this).find('option:selected'); var value = $option.val(); // to get content of "value" attrib var text = $option.text(); // to get Text content

But, I'm trying to figure out the kind of workaround I use for this other problem and how to accomplish with Intl-tel-input.

PS: The website is in development, so you need to enter email to get 2fa code from Cloudflare.

[rashadmehtab]

remove this: window.intlTelInput.loadUtils("https://cdn.jsdelivr.net/npm/intl-tel-input@24.5.0/build/js/utils.js");

You are adding utilsScript two times

[gitrpbrme]

Hi, Thanks for the help. I have comment the first import and used the second one, I just kept it so I can show I tried different approaches.

[rashadmehtab]

Why is it dropdownContainer: input? That’s incorrect; it should be document.body or any container element.

dropdownContainer: document.body, // or any specific container element

Remove dropdownContainer from your options to fix the issue, or assign a container element instead of input.

[gitrpbrme]

Hi Sir, Thanks again for the help. I have kept things as simple as possible now, but still not good.

The way I have programmed this was first I have created the model a pure .html simple file, then I transported this code to inside the website structure. I guess there is something to do with that darn popup that doesn't let me make it work.

I have recorded a simple video to highlight this behavior, so you don't have to go through the steps to reproduce: https://youtu.be/ze4tgFmztLM

Here is how I kept it :

        var input = document.querySelector("#telefonewhatsapp");
        var intl = window.intlTelInput(input, {
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.5.0/build/js/utils.js",
            separateDialCode: false,
            initialCountry: "br",          
        });

I have tried different setups, but like I said, as it works on pure .html format, it's definitely something with that popup that not even with the plugin creators we were able to solve it.

Please assist.

[jackocnr]

Please can you try adding dropdownContainer: document.body, as suggested by @rashadmehtab - this should fix the issue with the dropdown not showing when there's a popup.

[gitrpbrme]

Hi jackocnr, Thanks for your insights, I have tried dropdownContainer: document.body without any luck on solving this as well. I have tried setting different elements on dropdowncontainer as well, but it didn't work. Not sure what I'm missing to make this work on this popup, because on pure html it works.

[jackocnr]

If you can find the minimal set of code that reproduces the problem and put that in a CodePen, then I'd be happy to take a look. Here is an example pen with the plugin up and running - feel free to fork this if it helps.

[jackocnr]

Closing due to inactivity.

[gitrpbrme]

Hi Team, Just to wrap up, we decided not to use intl-tel-input on this popup as it's complicated. You can close it, thanks for the help and sorry for the trouble.