[FEATURE REQUEST] Custom class for Country List in case of mobile or useFullscreenPopup.

[creador-dev]

Feature Request: Add Option to Customize Country List Popup via Custom Class

Problem

The intl-tel-input library currently provides a great default UI for the country list popup. However, applying custom styles to the popup container is challenging because there is no way to scope styles exclusively to it. This can result in style conflicts that affect other parts of the application or even other plugins.

Proposed Solution

Add an option to specify a custom class for the popup container, similar to the existing containerClass option. This would allow developers to easily apply scoped styles to the popup without interfering with the library's default styles or those of other plugins.

Example

Introduce a configuration option, such as popupContainerClass, which can be passed when initializing intl-tel-input:

intlTelInput(inputElement, {
  popupContainerClass: 'my-custom-popup-class',
});

[jackocnr]

Hmm, why can't you just use the existing class .iti__dropdown-content which has the iti prefix so is likely to be unique to the plugin? Or if you need to target a specific instance of the plugin, then wrap that input in a div with a given class, or use the containerClass option for that instance.

[creador-dev]

Issue with Targeting Dropdown in Mobile View or Fullscreen Popup

I'm facing a challenge with styling the dropdown for intl-tel-input in the following scenarios:

1. When the dropdown is ported out (e.g., in mobile view).
2. When useFullscreenPopup is set to true.

In these cases, I cannot target the dropdown using containerClass because it doesn't wrap the dropdown with the custom class I specify.

Context and Solution

I am prefixing the existing styles of intl-tel-input with a custom class to prevent style conflicts with other plugins that use an older version of intl-tel-input. Without this prefixing, the new styles from intl-tel-input would apply globally and mess up the styles of other plugins.

However, because the dropdown isn't wrapped in the custom class when it's ported out or in fullscreen mode, I'm unable to isolate and target it effectively.

Goal

I need a way to ensure that the dropdown, even when ported out or in fullscreen mode, can be targeted by my custom class so that my prefixed styles apply consistently without interfering with other plugins.

For now, we don't have anyway or option to add our custom class to dropdown when it appears as popup.

[jackocnr]

Thanks for the clear write-up. As I was reading it, I thought a simple solution would just be to apply the containerClass to the dropdown container when useFullscreenPopup/dropdownContainer options are used - what do you think? This would actually be more consistent, as in those cases, the dropdown container already has the main plugin classes iti iti--container so it should probably have the containerClass as well anyway. EDIT: additionally, on desktop screens, the dropdown content is already nested within containerClass, but then on mobile it is not, which is inconsistent.

[creador-dev]

I was thinking the same about applying it, but I was concerned it might cause other issues. If you believe applying the containerClass is the right approach, I agree we should proceed with it in this case. I will make the adjustments in the PR and push.

[creador-dev]

Hi @jackocnr, I’ve added a PR for this. Please review it at your convenience, and let me know if any changes or additional work are needed.

[jackocnr]

That's now merged. Thanks again.