intl-tel-input icon indicating copy to clipboard operation
intl-tel-input copied to clipboard

How to keep dropdown mode to select country on all devices

Open Yrobot opened this issue 3 years ago • 1 comments
trafficstars

Steps to reproduce

  1. click the country select
  2. popup the list

Expected behaviour

Show Dropdown on PC device, show global select modal on mobile device.
Or let repo user decide which mode should be used, like what @alexweb mentioned in #1326 .

Actual behaviour

Some how it always show the global modal to select the country code.

image

As I can see, this bug is caused by the isMobile logic. /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) always return true on my side.

Initialisation options

intlTelInput(inputRef.current, {
    separateDialCode: true,
    customContainer: 'basic-phone-input',
});

My thoughts

Maybe we could add one param called tabletMode(just like darkMode) into options.

interface tabletMode: boolean

and the isMobile logic will be like below:

this.isMobile = tabletMode!==undefined ? tabletMode : /Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

Yrobot avatar Jul 05 '22 09:07 Yrobot

Create a PR: #1329

Yrobot avatar Jul 05 '22 09:07 Yrobot

Apologies for the delay in getting to this, life has been getting in the way.

So do I understand you correctly: the problem you're seeing is that with your testing you always get the full screen ("mobile") popup instead of the inline dropdown? From looking at your screenshot, I think this will be due to your user agent string, which appears to include the word "iPhone" which will be why you always get the mobile version. I think this is just a dev testing issue and is not actually a problem that users would ever see. I'm going to close this for now, but if I've missed something, please feel free to re-open. Thanks.

jackocnr avatar Apr 06 '23 17:04 jackocnr