Prevent closing the country popup when no result (#30)

* Prevent closing the country popup when no result

* search text as a prop

* new prop

Author: CdTgr

dev/serve.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <div class="row">
       <div class="col-3 offset-3 q-mt-lg">
-        <vue3-q-tel-input use-icon v-model:tel="input" searchText="Search using code/country" dense filled default-country="de" @country="c => (country = c)" />
+        <vue3-q-tel-input use-icon v-model:tel="input" searchText="Search using code/country" dense filled default-country="de" @country="c => (country = c)" no-results-text="Sample here" />
       </div>
     </div>
     <div>entered telephone number : {{ input }}</div>

readme.md

@@ -122,6 +122,7 @@ _example_
 | dropdown-options | Obejct  | No       | The props availalbe for the [Quasar Select](https://quasar.dev/vue-components/select) |
 | eager-validate   | Boolean | No       | Set to true if the validation needs not be run on loading                             |
 | use-icon         | Boolean | No       | Set to use the emoji icon instead of the default flag images                          |
+| no-results-text  | String  | No       | Set a string when the search results nothing, default: 'No results found'             |
 
 #### Events
 

src/component/CountrySelection.vue

@@ -2,6 +2,7 @@
   <q-select
     :model-value="country"
     :options="countryOptions"
+    :option-disable="isDisabled"
     hide-bottom-space
     hide-dropdown-icon
     borderless
@@ -14,9 +15,9 @@
   >
     <template v-slot:option="scope">
       <div class="flex items-center q-pa-xs mdi-border-bottom no-wrap" v-bind="scope.itemProps">
-        <span :class="!useIcon ? ['v3q_tel__flag', scope.opt.iso2.toLowerCase()] : 'q-mr-sm'">{{ useIcon ? scope.opt.emoji : '' }}</span>
-        <span class="q-ml-sm text-no-wrap">(+{{ scope.opt.dialCode }})</span>
-        <span class="q-ml-sm text-no-wrap ellipsis">{{ scope.opt.name }}</span>
+        <span v-if="!!scope.opt.iso2" :class="!useIcon ? ['v3q_tel__flag', scope.opt.iso2.toLowerCase()] : 'q-mr-sm'">{{ useIcon ? scope.opt.emoji : '' }}</span>
+        <span v-if="!!scope.opt.dialCode" class="q-ml-sm text-no-wrap">(+{{ scope.opt.dialCode }})</span>
+        <span :class="['q-ml-sm text-no-wrap ellipsis', { 'disabled full-width text-center': scope.opt.disabled }]">{{ scope.opt.name }}</span>
       </div>
       <q-separator />
     </template>
@@ -49,6 +50,8 @@ import countries, { filterCountries } from './countries';
 import { Country } from './types';
 import { QSelect, QIcon, QSeparator, QInput } from 'quasar';
 
+type CountryOption = Country & { disabled?: boolean };
+
 export default defineComponent({
   name: 'country-selection',
   components: {
@@ -61,6 +64,7 @@ export default defineComponent({
     country: { type: Object as PropType<Country>, required: true },
     searchText: { type: String, default: () => 'Search' },
     searchIcon: { type: String, default: () => 'search' },
+    noResultsText: { type: String, default: () => 'No results found' },
     useIcon: { type: Boolean, default: () => false },
   },
   emits: ['countryChanged', 'update:country'],
@@ -75,7 +79,7 @@ export default defineComponent({
   },
   setup() {
     const search_text: Ref<string> = ref('');
-    const countryOptions: Ref<Country[]> = ref([]);
+    const countryOptions: Ref<CountryOption[]> = ref([]);
     return {
       search_text,
       countryOptions,
@@ -87,12 +91,26 @@ export default defineComponent({
   methods: {
     performSearch() {
       const needle = this.search_text.toLowerCase().trim();
-      this.countryOptions = needle === '' ? [...countries] : filterCountries(needle);
+      const newCountries: CountryOption[] = needle === '' ? [...countries] : filterCountries(needle);
+      if (newCountries.length === 0)
+        newCountries.push({
+          name: this.noResultsText,
+          dialCode: '',
+          iso2: '',
+          disabled: true,
+        });
+      this.countryOptions.splice(0, this.countryOptions.length, ...newCountries);
     },
     countryChanged(val: Country) {
       this.$emit('update:country', val);
       this.$emit('countryChanged', val);
     },
+    isDisabled(option: unknown) {
+      if (typeof option === 'string') {
+        return false;
+      }
+      return !!(option as CountryOption).disabled;
+    },
   },
 });
 </script>

src/component/Index.vue

@@ -10,6 +10,7 @@
         :readonly="readonly"
         :disable="disable"
         :dense="dense"
+        :no-results-text="noResultsText"
         v-bind="dropdownOptions"
         class="no-border-field-before no-padding-field font-reduced-input-adon"
       >
@@ -44,6 +45,7 @@ export default defineComponent({
     searchText: { type: String, default: () => 'Search' },
     searchIcon: { type: String, default: () => 'search' },
     dropdownOptions: { type: Object, default: () => ({}) },
+    noResultsText: { type: String, default: () => 'No results found' },
     defaultCountry: { type: String, default: () => 'us' },
     eagerValidate: { type: Boolean, default: () => true },
     useIcon: { type: Boolean, default: () => false },