Country selector not usable on mobile

[jonatansberg]

Problem: The country selector is more or less useless on mobile.

Preferred solution: Use a selectbox replacement that looks good on desktop and opens the native select interface on mobile.

[mukeshsoni]

@mrlundis Do you have any suggestions for select box?

[jonatansberg]

I did some quick googling earlier, and I was unfortunately unable to find a good react lib for this.

A relatively easy solution would be to:

• render a normal select box for mobile users
• hide it visually using css
• trigger focus once the user clicks the flag icon

Earlier versions of intl-tel-inputused to do something like this, but I cannot reproduce it in their current release version. The version used on bitrefill.com works fine in mobile safari tho.

There's also https://jedwatson.github.io/react-select/, which implements a slightly different solution, but that might be overkill..

[catamphetamine]

I would suggest that inputting a country name is better than scrolling that giant list on a mobile. You may also consider an alternative React component: http://halt-hammerzeit.github.io/react-phone-number-input/ It is kinda slow on my iPhone, but maybe I'll look into that later.

[MaxInMoon]

Css did the trick for me. It gives a elegant full view, and seems very suitable on small screens, if you accept that the only way to close is to select a country.

.country-list {
  position: fixed;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: none;
  max-width: none;
  width: 100%;
  padding: 1em;
  border: none;
  border-radius: 0;
}

[mukeshsoni]

@mrlundis I have changed the dropdown list to a virtualized list. Also adjusted the css a bit. It's much smoother (even on mobile phone). Check it out and let me know if you find problems on mobile.