diff --git a/src/components/vue-tel-input.test.ts b/src/components/vue-tel-input.test.ts index cc8e75f..7530b05 100644 --- a/src/components/vue-tel-input.test.ts +++ b/src/components/vue-tel-input.test.ts @@ -339,6 +339,19 @@ describe('Props', () => { expect(wrapper.find('.vti__dropdown-item > .vti__flag.au').element.parentElement.getAttribute('class')).toContain('preferred'); }) }); + + it('does not show preferred countries twice', () => { + const wrapper = shallowMount(VueTelInput, { + props: { + preferredCountries: ['AU'], + }, + }); + + wrapper.vm.$nextTick(() => { + var countryList = wrapper.vm.sortedCountries.filter((c) => c.iso2 == 'AU') + expect(countryList.length).toBe(1); + }) + }) }); describe(':validCharactersOnly', () => { // TODO diff --git a/src/components/vue-tel-input.vue b/src/components/vue-tel-input.vue index da18260..1c09176 100644 --- a/src/components/vue-tel-input.vue +++ b/src/components/vue-tel-input.vue @@ -274,7 +274,9 @@ const preferredCountries = getCountries(props.preferredCountries) .map((country) => ({ ...country, preferred: true })); - const countriesList = [...preferredCountries, ...filteredCountries.value] as Array + const filteredCountriesWithoutPreferred = filteredCountries.value.filter((country) => !preferredCountries.some((c) => c.iso2 == country.iso2)) + + const countriesList = [...preferredCountries, ...filteredCountriesWithoutPreferred] as Array if (!props.dropdownOptions.showSearchBox) { return countriesList }