allowDropdown and separateDialCode combination question

[mch0lic]

Plugin version

latest

Steps to reproduce

1. Set allowDropdown to 'false'
2. Set separateDialCode to 'true'

Expected behaviour

One would assume allowDropdown would disable the dropdown regardless of separateDialCode setting.

Actual behaviour

Once separateDialCode is set to 'true' the dropdown always works no matter what allowDropdown setting is set to.

Initialisation options

Same as https://intl-tel-input.com/storybook/?path=/docs/intltelinput--allowdropdown and setting separateDialCode to 'true'.

[jackocnr]

separateDialCode forces allowDropdown to true because of the way it works. I've just updated the readme to make this clear:

Since the user cannot edit the displayed dial code, they may try to type a new one - in this case, to avoid having two dial codes next to each other, we automatically open the country dropdown and put the new dial code in the search input instead. So if they type +54, then Argentina will be highlighted in the dropdown and they can simply press Enter to select it, updating the displayed dial code.

Can you explain your use case - why do you want to have separateDialCode enabled and allowDropdown disabled?

And what would you like to happen when the user types a plus in the phone input?

[mch0lic]

I'm using this with combination of onlyCountries option. So in cases where there is only one country in the list, there is no point showing the dropdown, but showing dial code and country flag still make sense as user can type in phone number without prefix.

I can technically work around this issue with custom JS code, but I much rather set a flag while initializing the field.

PS: Thanks for updating docs!

[jackocnr]

Thanks for getting back to me. So now I'm wondering: if all of your users are from the same country, then why show the international dial code at all? (Why not just leave separateDialCode disabled?)

Normally, on websites that only serve users from one particular country, they just have a simple plain text input for users to enter their number in national format.

I would argue that in this case, it's confusing to show a flag and international dial code, because it implies there are other options. I would say the best setup would be leaving separateDialCode disabled, and also do allowDropdown=false and showFlags=false.

[mch0lic]

Simple example, you may accept any billing phone but only local shipping number (usually limitation by delivery companies). Now you have two phone number fields and both are visually different. Not ideal.

As I've said, I can work around this, but then again it makes no sense to show dropdown ether if you have only one phone number in the list:

PS: Im ok with no fix from your side, just arguing my case :)

[jackocnr]

Hmm it is an interesting use case, thanks for sharing.

Personally, in that case, if you wanted some kind of visual consistency, I would have separateDialCode=false, allowDropdown=false, but leave showFlags=true. This will still show the flag, which gives you the consistent design, but puts it on the right hand side of the input, to show that it is not changeable. What do you think?

[mch0lic]

My preference is just to disable the dropdown, but I'll check with my colleagues see what they want to do.

Thanks!

[jackocnr]

The risk of having the same design for two inputs that actually behave differently is that this may confuse the user. The user may click the selected country and be confused when it doesn't open the dropdown, like it did for the other phone input - they might think it's broken.

[jackocnr]

Ok in the end I caved and decided this should be the dev's decision! Added support for separateDialCode=true and allowDropdown=false in v24.3.0. Let me know if you find any issues. Should also work with strictMode, to prevent the user from entering any more plus characters.

[jackocnr]

Oops, there was a bug in that version. Try v24.3.1.