fix: Error after tabbing to the dropdown field (#460)

[daniil4udo]

Fix foe issue #460

In this fix, I have replaced the usage of v-if with v-show in instances where DOM elements are immediately targeted. Through this adjustment, we ensure smoother toggling of nodes while significantly improving performance, especially in scenarios where rapid toggling of elements occurs.

[iamstevendao]

it was originally v-show, we switched to v-if because of https://github.com/iamstevendao/vue-tel-input/issues/200. do you think it'll cause the same issue again?

[pascalvaccaro]

Maybe you can use a v-show and use the v-if in the list's children, so that the refList is always a list even if it's empty. I'd rather have an empty list than a null value as it produces a bug in the phone component :-(

UPDATE

Maybe you could replace this line

<li v-for="(pb, index) in sortedCountries">

with something like this

<li v-for="(pb, index) in (data.open ? sortedCountries : [])

Not sure if vue is up for it, instead you could use a computed property in the script that handles the conditional

const openedCountries = computed(() => data.open ? sortedCountries : [])

Then use this new computed property in the v-for directive by replacing sortedCountries with openedCountries This way you may still have a high performance score with only the necessary dom elements, while solving this nasty bug!

[Flo2315]

@daniil4udo @iamstevendao @pascalvaccaro i think this fix, fix up the problem 🙏

[iamstevendao]

@Flo2315 awesome. thank you!

[iamstevendao]

the fix was released on latest (v9.1.4)