From 7dc19469f5ffecc22196f61d4a728df86e12fdaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?mads=20j=C3=B8rgensen?= <mads.da.mind@hotmail.com>
Date: Mon, 9 Dec 2024 13:14:08 +0100
Subject: [PATCH] fix: Preferred countries showing twice

* Added test
---
 src/components/vue-tel-input.test.ts | 13 +++++++++++++
 src/components/vue-tel-input.vue     |  4 +++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/vue-tel-input.test.ts b/src/components/vue-tel-input.test.ts
index cc8e75f4..7530b058 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 da182608..1c09176b 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<CountryObject & { preferred: boolean }>
+    const filteredCountriesWithoutPreferred = filteredCountries.value.filter((country) => !preferredCountries.some((c) => c.iso2 == country.iso2))
+
+    const countriesList = [...preferredCountries, ...filteredCountriesWithoutPreferred] as Array<CountryObject & { preferred: boolean }>
     if (!props.dropdownOptions.showSearchBox) {
       return countriesList
     }