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.67k stars 1.95k forks source link

useFullscreenPopup: false and autofocused input fields on ios closing the dropdown #1744

Closed IlievaDayana closed 2 months ago

IlievaDayana commented 3 months ago

Plugin version

e.g. v23.3.2

Steps to reproduce

  1. set this in your config useFullscreenPopup: false, and open on ios device for the purpose your screen needs to be scrollable
  2. click on an inputfield ios triggers scroll to a focused input
  3. this closes the dropdown

This is my config:

intlTelInput(inputPhone, {
    utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/23.3.2/js/utils.js',
    initialCountry: 'auto',
    customContainer: 'peer',
    useFullscreenPopup: false,
    preferredCountries,
    customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
      return '(e.g.) ' + selectedCountryPlaceholder;
    },
    // separateDialCode:true, this can be added if we want to appear next to the flag the intl code +359
    dropdownContainer,
  });
jackocnr commented 3 months ago

Which version of the plugin are you using? We can only provide support for the latest version.

Also please can you explain your use case in more detail.

set this in your config useFullscreenPopup: false, and open on ios device for the purpose your screen needs to be scrollable

Are you saying you need to be able to scroll the page while the dropdown is open? Why is that?

As per the readme, if you're using the dropdownContainer option, the dropdown will automatically close when the user scrolls.

jackocnr commented 2 months ago

Closing due to inactivity.