Fullscreen country selector breaks when the virtual keyboard is open
Prerequisites
- I am using the latest version (v29.2.3) of both intl-tel-input and utils.js.
- We use libphonenumber for formatting, validation, and placeholder numbers. If my issue relates to one of these things, I confirm I have used their test site to ensure the issue is not with them, and will provide a link to the test results page showing this. Else, I have reported the issue to them instead of here.
- I have searched the existing issues (including closed issues) to ensure this has not already been discussed.
Integration
Vanilla JavaScript library
Current behaviour
Fullscreen popup is cut off / list collapses when the keyboard opens
Version: 29.2.3
Environment:
Options: countrySelectorMode: "FULLSCREEN", countrySearch: true, separateDialCode: true
What happens
When the virtual keyboard is open, the fullscreen popup is misplaced:
Tap the flag — the popup opens, the search input is auto-focused, the keyboard slides up, and the country list collapses: only the search input stay visible. Dismissing the keyboard restores the full list.
Expected behaviour
Expected behaviour
The popup should stay inside the visual viewport while the keyboard is open — top edge at the top of the visible area, bottom edge just above the keyboard — with the country list scrolling in whatever space is left. Exactly how it looks when the keyboard is dismissed.
Steps to reproduce
Steps to reproduce
- Init an input with
countrySelectorMode: "FULLSCREEN",countrySearch: true,separateDialCode: true. - Open the page on a phone.
- Tap the country button (flag).
The popup opens, the search input is auto-focused, the keyboard slides up, and the country list collapses — only the search input stays visible. Dismiss the keyboard and the full list comes back.
Anything else?
No response
Source: jackocnr/intl-tel-input