search

jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers. React and Vue components also included.
https://intl-tel-input.com
MIT License
7.69k stars 1.95k forks source link

Problem with position the list of countries and codes on pages with RTL content #1822

Closed badikgit closed 2 months ago

badikgit commented 2 months ago

Plugin version

e.g. v24.5.0 (please try latest version)

Steps to reproduce

  1. Open demo page.
  2. Set css property "direction: rtl" for html or body tag for example using dev tools (as step for simulate switching the imaginary language of the site to Arabic for example).
  3. Open the list of countries of the intl-tel-input example.

Expected behaviour

The list of countries should not be visually shifted.

Actual behaviour

The list of countries is visually shifted to the left. This can be a problem for the visibility of the list contents if, for example, the field is located on the left side of the screen. image

Initialisation options

I don't know

jackocnr commented 2 months ago

The problem is that you're setting dir=rtl after the plugin is initialised. It needs to be set before initialisation for it to work correctly. See the Right to Left example page on the demo site for a working example.

badikgit commented 2 months ago

@jackocnr Thank you. It became a little clearer how to use it. In this regard, the question arises: is there a way to change the localization settings and the direction of writing after initialisation of the input without destroying the instance?

For example, I have a simple html page with support for changing the page language to different languages ​​without reloading the page, and this page can have many fields for entering a phone number. I would like to be able to change dir and i18n depending on the selected language while preserving the numbers in each instance of the input, since the user may want to change the language at any time, for example, after entering the number or part of it. And at the moment it turns out that the only possible way to do this is to save the entered number (or what the user entered, for example +1-888-library) for each instance before destroying the instance, and then create a new instance and fill it with the saved information?

jackocnr commented 1 month ago

is there a way to change the localization settings and the direction of writing after initialisation of the input without destroying the instance?

I'm afraid this is not possible, no. As you say, you'll need to destroy the instance and re-initialise to achieve this.