vue-tel-input 5.6.3 → 5.10.0

package/README.md

@@ -87,9 +87,9 @@ Or use the component directly:
       VueTelInput,
     },
   };
-
-  <style src="vue-tel-input/dist/vue-tel-input.css"></style>;
 </script>
+
+<style src="vue-tel-input/dist/vue-tel-input.css"></style>
 ```
 
 ### Browser

package/dist/css/component.css

@@ -1 +1 @@
-.vue-tel-input{border-radius:3px;display:flex;border:1px solid #bbb;text-align:left}.vue-tel-input.disabled .dropdown,.vue-tel-input.disabled .selection,.vue-tel-input.disabled input{cursor:no-drop}.vue-tel-input:focus-within{box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);border-color:#66afe9}.vti__dropdown{display:flex;flex-direction:column;align-content:center;justify-content:center;position:relative;padding:7px;cursor:pointer}.vti__dropdown.show{max-height:300px;overflow:scroll}.vti__dropdown.disabled,.vti__dropdown.open{background-color:#f3f3f3}.vti__dropdown.disabled{cursor:no-drop;outline:none}.vti__dropdown:hover{background-color:#f3f3f3}.vti__selection{font-size:.8em;display:flex;align-items:center}.vti__selection .vti__country-code{color:#666}.vti__flag{margin-right:5px;margin-left:5px}.vti__dropdown-list{z-index:1;padding:0;margin:0;text-align:left;list-style:none;max-height:200px;overflow-y:scroll;position:absolute;left:-1px;background-color:#fff;border:1px solid #ccc;width:390px}.vti__dropdown-list.below{top:33px}.vti__dropdown-list.above{top:auto;bottom:100%}.vti__dropdown-arrow{transform:scaleY(.5);display:inline-block;color:#666}.vti__dropdown-item{cursor:pointer;padding:4px 15px}.vti__dropdown-item.highlighted{background-color:#f3f3f3}.vti__dropdown-item.last-preferred{border-bottom:1px solid #cacaca}.vti__dropdown-item .vti__flag{display:inline-block;margin-right:5px}.vti__input{border:none;border-radius:0 2px 2px 0;width:100%;outline:none;padding-left:7px}
+.vue-tel-input{border-radius:3px;display:flex;border:1px solid #bbb;text-align:left}.vue-tel-input.disabled .dropdown,.vue-tel-input.disabled .selection,.vue-tel-input.disabled input{cursor:no-drop}.vue-tel-input:focus-within{box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);border-color:#66afe9}.vti__dropdown{display:flex;flex-direction:column;align-content:center;justify-content:center;position:relative;padding:7px;cursor:pointer}.vti__dropdown.show{max-height:300px;overflow:scroll}.vti__dropdown.disabled,.vti__dropdown.open{background-color:#f3f3f3}.vti__dropdown.disabled{cursor:no-drop;outline:none}.vti__dropdown:hover{background-color:#f3f3f3}.vti__selection{font-size:.8em;display:flex;align-items:center}.vti__selection .vti__country-code{color:#666}.vti__flag-wrapper{display:inline-block;width:30px;text-align:center}.vti__flag{margin-right:5px;margin-left:5px}.vti__dropdown-list{z-index:1;padding:0;margin:0;text-align:left;list-style:none;max-height:200px;overflow-y:scroll;position:absolute;left:-1px;background-color:#fff;border:1px solid #ccc}.vti__dropdown-list.below{top:33px}.vti__dropdown-list.above{top:auto;bottom:100%}.vti__dropdown-arrow{transform:scaleY(.5);display:inline-block;color:#666}.vti__dropdown-item{cursor:pointer;padding:4px 15px}.vti__dropdown-item.highlighted{background-color:#f3f3f3}.vti__dropdown-item.last-preferred{border-bottom:1px solid #cacaca}.vti__dropdown-item .vti__flag{display:inline-block;margin-right:5px}.vti__input{border:none;border-radius:0 2px 2px 0;width:100%;outline:none;padding-left:7px}.vti__search_box{border:1px solid #ccc;width:94%;padding:7px;margin:2px 2px}

package/dist/vue-tel-input.common.js

@@ -5496,12 +5496,23 @@ var allProps = [{
   type: Boolean,
   description: 'Show flags in the dropdown selection and list',
   inDemo: true
+}, {
+  name: 'dropdownOptions.showSearchBox',
+  default: false,
+  type: Boolean,
+  description: 'Show country search box',
+  inDemo: true
 }, {
   name: 'dropdownOptions.tabindex',
   default: 0,
   type: Number,
   description: 'Native dropdown <code>tabindex</code> attribute',
   inDemo: false
+}, {
+  name: 'dropdownOptions.width',
+  default: '390px',
+  type: String,
+  description: 'Specify dropdown width'
 }, {
   name: 'ignoredCountries',
   default: [],
@@ -5657,8 +5668,8 @@ var defaultOptions = [].concat(allProps).reduce(function (prv, crr) {
 /* harmony default export */ const utils = ({
   options: _objectSpread2({}, defaultOptions)
 });
-;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"10391616-vue-loader-template"}!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/vue-tel-input.vue?vue&type=template&id=fbdc7d32&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['vue-tel-input', _vm.styleClasses, { disabled: _vm.disabled }]},[_c('div',{directives:[{name:"click-outside",rawName:"v-click-outside",value:(_vm.clickedOutside),expression:"clickedOutside"}],class:['vti__dropdown', { open: _vm.open, disabled: _vm.dropdownOptions.disabled }],attrs:{"tabindex":_vm.dropdownOptions.tabindex},on:{"keydown":[_vm.keyboardNav,function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.reset.apply(null, arguments)}],"click":_vm.toggleDropdown}},[_c('span',{staticClass:"vti__selection"},[(_vm.dropdownOptions.showFlags)?_c('div',{class:['vti__flag', _vm.activeCountryCode.toLowerCase()]}):_vm._e(),(_vm.dropdownOptions.showDialCodeInSelection)?_c('span',{staticClass:"vti__country-code"},[_vm._v(" +"+_vm._s(_vm.activeCountry && _vm.activeCountry.dialCode)+" ")]):_vm._e(),_vm._t("arrow-icon",function(){return [_c('span',{staticClass:"vti__dropdown-arrow"},[_vm._v(_vm._s(_vm.open ? "▲" : "▼"))])]},{"open":_vm.open})],2),(_vm.open)?_c('ul',{ref:"list",staticClass:"vti__dropdown-list",class:_vm.dropdownOpenDirection},_vm._l((_vm.sortedCountries),function(pb,index){return _c('li',{key:pb.iso2 + (pb.preferred ? '-preferred' : ''),class:['vti__dropdown-item', _vm.getItemClass(index, pb.iso2)],on:{"click":function($event){return _vm.choose(pb)},"mousemove":function($event){_vm.selectedIndex = index}}},[(_vm.dropdownOptions.showFlags)?_c('div',{class:['vti__flag', pb.iso2.toLowerCase()]}):_vm._e(),_c('strong',[_vm._v(_vm._s(pb.name))]),(_vm.dropdownOptions.showDialCodeInList)?_c('span',[_vm._v(" +"+_vm._s(pb.dialCode)+" ")]):_vm._e()])}),0):_vm._e()]),((_vm.inputOptions.type)==='checkbox')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"aria-describedby":_vm.inputOptions['aria-describedby'],"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.phone)?_vm._i(_vm.phone,null)>-1:(_vm.phone)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":_vm.onInput,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}],"change":function($event){var $$a=_vm.phone,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.phone=$$a.concat([$$v]))}else{$$i>-1&&(_vm.phone=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.phone=$$c}}}}):((_vm.inputOptions.type)==='radio')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"aria-describedby":_vm.inputOptions['aria-describedby'],"type":"radio"},domProps:{"checked":_vm._q(_vm.phone,null)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":_vm.onInput,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}],"change":function($event){_vm.phone=null}}}):_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"aria-describedby":_vm.inputOptions['aria-describedby'],"type":_vm.inputOptions.type},domProps:{"value":(_vm.phone)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":[function($event){if($event.target.composing){ return; }_vm.phone=$event.target.value},_vm.onInput],"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}]}}),_vm._t("icon-right")],2)}
+;// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"1dc3e612-vue-loader-template"}!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ruleSet[0].rules[0].use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/vue-tel-input.vue?vue&type=template&id=0901b80c&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['vue-tel-input', _vm.styleClasses, { disabled: _vm.disabled }]},[_c('div',{directives:[{name:"click-outside",rawName:"v-click-outside",value:(_vm.clickedOutside),expression:"clickedOutside"}],class:['vti__dropdown', { open: _vm.open, disabled: _vm.dropdownOptions.disabled }],attrs:{"aria-label":"Country Code Selector","aria-haspopup":"listbox","aria-expanded":_vm.open,"role":"button","tabindex":_vm.dropdownOptions.tabindex},on:{"keydown":[_vm.keyboardNav,function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.toggleDropdown.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"esc",27,$event.key,["Esc","Escape"])){ return null; }return _vm.reset.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"tab",9,$event.key,"Tab")){ return null; }return _vm.reset.apply(null, arguments)}],"click":_vm.toggleDropdown}},[_c('span',{staticClass:"vti__selection"},[(_vm.dropdownOptions.showFlags)?_c('span',{class:['vti__flag', _vm.activeCountryCode.toLowerCase()]}):_vm._e(),(_vm.dropdownOptions.showDialCodeInSelection)?_c('span',{staticClass:"vti__country-code"},[_vm._v(" +"+_vm._s(_vm.activeCountry && _vm.activeCountry.dialCode)+" ")]):_vm._e(),_vm._t("arrow-icon",function(){return [_c('span',{staticClass:"vti__dropdown-arrow"},[_vm._v(_vm._s(_vm.open ? "▲" : "▼"))])]},{"open":_vm.open})],2),(_vm.open)?_c('ul',{ref:"list",staticClass:"vti__dropdown-list",class:_vm.dropdownOpenDirection,style:({ width: _vm.dropdownOptions.width }),attrs:{"role":"listbox"}},[(_vm.dropdownOptions.showSearchBox)?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.searchQuery),expression:"searchQuery"}],staticClass:"vti__input vti__search_box",attrs:{"aria-label":"Search by country name or country code","placeholder":_vm.sortedCountries[0].name,"type":"text"},domProps:{"value":(_vm.searchQuery)},on:{"input":function($event){if($event.target.composing){ return; }_vm.searchQuery=$event.target.value}}}):_vm._e(),_vm._l((_vm.sortedCountries),function(pb,index){return _c('li',{key:pb.iso2 + (pb.preferred ? '-preferred' : ''),class:['vti__dropdown-item', _vm.getItemClass(index, pb.iso2)],attrs:{"role":"option","tabindex":"-1","aria-selected":_vm.activeCountryCode === pb.iso2 && !pb.preferred},on:{"click":function($event){return _vm.choose(pb)},"mousemove":function($event){_vm.selectedIndex = index}}},[_c('div',{staticClass:"vti__flag-wrapper"},[(_vm.dropdownOptions.showFlags)?_c('span',{class:['vti__flag', pb.iso2.toLowerCase()]}):_vm._e()]),_c('strong',[_vm._v(_vm._s(pb.name))]),(_vm.dropdownOptions.showDialCodeInList)?_c('span',[_vm._v(" +"+_vm._s(pb.dialCode)+" ")]):_vm._e()])})],2):_vm._e()]),((_vm.inputOptions.type)==='checkbox')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"aria-describedby":_vm.inputOptions['aria-describedby'],"type":"checkbox"},domProps:{"checked":Array.isArray(_vm.phone)?_vm._i(_vm.phone,null)>-1:(_vm.phone)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":_vm.onInput,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}],"change":function($event){var $$a=_vm.phone,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=null,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.phone=$$a.concat([$$v]))}else{$$i>-1&&(_vm.phone=$$a.slice(0,$$i).concat($$a.slice($$i+1)))}}else{_vm.phone=$$c}}}}):((_vm.inputOptions.type)==='radio')?_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"aria-describedby":_vm.inputOptions['aria-describedby'],"type":"radio"},domProps:{"checked":_vm._q(_vm.phone,null)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":_vm.onInput,"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}],"change":function($event){_vm.phone=null}}}):_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.phone),expression:"phone"}],ref:"input",class:['vti__input', _vm.inputOptions.styleClasses],attrs:{"autocomplete":_vm.inputOptions.autocomplete,"autofocus":_vm.inputOptions.autofocus,"disabled":_vm.disabled,"id":_vm.inputOptions.id,"maxlength":_vm.inputOptions.maxlength,"name":_vm.inputOptions.name,"placeholder":_vm.parsedPlaceholder,"readonly":_vm.inputOptions.readonly,"required":_vm.inputOptions.required,"tabindex":_vm.inputOptions.tabindex,"aria-describedby":_vm.inputOptions['aria-describedby'],"type":_vm.inputOptions.type},domProps:{"value":(_vm.phone)},on:{"blur":_vm.onBlur,"focus":_vm.onFocus,"input":[function($event){if($event.target.composing){ return; }_vm.phone=$event.target.value},_vm.onInput],"keyup":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onEnter.apply(null, arguments)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }return _vm.onSpace.apply(null, arguments)}]}}),_vm._t("icon-right")],2)}
 var staticRenderFns = []
 
 
@@ -8764,6 +8775,35 @@ var _excluded = ["metadata"];
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 
 
 
@@ -8903,7 +8943,8 @@ function getDefault(key) {
       typeToFindInput: '',
       typeToFindTimer: null,
       dropdownOpenDirection: 'below',
-      parsedPlaceholder: this.inputOptions.placeholder
+      parsedPlaceholder: this.inputOptions.placeholder,
+      searchQuery: ''
     };
   },
   computed: {
@@ -8949,13 +8990,23 @@ function getDefault(key) {
       return this.allCountries;
     },
     sortedCountries: function sortedCountries() {
+      var _this2 = this;
+
       // Sort the list countries: from preferred countries to all countries
       var preferredCountries = this.getCountries(this.preferredCountries).map(function (country) {
         return _objectSpread2(_objectSpread2({}, country), {}, {
           preferred: true
         });
       });
-      return [].concat(_toConsumableArray(preferredCountries), _toConsumableArray(this.filteredCountries));
+      var countriesList = [].concat(_toConsumableArray(preferredCountries), _toConsumableArray(this.filteredCountries));
+
+      if (!this.dropdownOptions.showSearchBox) {
+        return countriesList;
+      }
+
+      return countriesList.filter(function (c) {
+        return new RegExp(_this2.searchQuery, 'i').test(c.name) || new RegExp(_this2.searchQuery, 'i').test(c.iso2) || new RegExp(_this2.searchQuery, 'i').test(c.dialCode);
+      });
     },
     phoneObject: function phoneObject() {
       var _this$phone, _result$isValid, _result2;
@@ -9017,7 +9068,7 @@ function getDefault(key) {
       this.$emit('validate', this.phoneObject);
     },
     'phoneObject.formatted': function phoneObjectFormatted(value) {
-      var _this2 = this;
+      var _this3 = this;
 
       if (!this.autoFormat || this.customValidate) {
         return;
@@ -9026,8 +9077,8 @@ function getDefault(key) {
       this.emitInput(value);
       this.$nextTick(function () {
         // In case `v-model` is not set, we need to update the `phone` to be new formatted value
-        if (value && !_this2.value) {
-          _this2.phone = value;
+        if (value && !_this3.value) {
+          _this3.phone = value;
         }
       });
     },
@@ -9038,13 +9089,13 @@ function getDefault(key) {
       this.resetPlaceholder();
     },
     value: function value(_value, oldValue) {
-      var _this3 = this;
+      var _this4 = this;
 
       if (!this.testCharacters()) {
         this.$nextTick(function () {
-          _this3.phone = oldValue;
+          _this4.phone = oldValue;
 
-          _this3.onInput();
+          _this4.onInput();
         });
       } else {
         this.phone = _value;
@@ -9061,7 +9112,7 @@ function getDefault(key) {
     }
   },
   mounted: function mounted() {
-    var _this4 = this;
+    var _this5 = this;
 
     if (this.value) {
       this.phone = this.value.trim();
@@ -9069,15 +9120,15 @@ function getDefault(key) {
 
     this.cleanInvalidCharacters();
     this.initializeCountry().then(function () {
-      var _this4$inputOptions;
+      var _this5$inputOptions;
 
-      if (!_this4.phone && (_this4$inputOptions = _this4.inputOptions) !== null && _this4$inputOptions !== void 0 && _this4$inputOptions.showDialCode && _this4.activeCountryCode) {
-        _this4.phone = "+".concat(_this4.activeCountryCode);
+      if (!_this5.phone && (_this5$inputOptions = _this5.inputOptions) !== null && _this5$inputOptions !== void 0 && _this5$inputOptions.showDialCode && _this5.activeCountryCode) {
+        _this5.phone = "+".concat(_this5.activeCountryCode);
       }
 
-      _this4.$emit('validate', _this4.phoneObject);
+      _this5.$emit('validate', _this5.phoneObject);
     }).catch(console.error).then(function () {
-      _this4.finishMounted = true;
+      _this5.finishMounted = true;
     });
   },
   methods: {
@@ -9096,15 +9147,15 @@ function getDefault(key) {
       //   .catch(console.error);
     },
     initializeCountry: function initializeCountry() {
-      var _this5 = this;
+      var _this6 = this;
 
       return new Promise(function (resolve) {
-        var _this5$phone;
+        var _this6$phone;
 
         /**
          * 1. If the phone included prefix (i.e. +12), try to get the country and set it
          */
-        if (((_this5$phone = _this5.phone) === null || _this5$phone === void 0 ? void 0 : _this5$phone[0]) === '+') {
+        if (((_this6$phone = _this6.phone) === null || _this6$phone === void 0 ? void 0 : _this6$phone[0]) === '+') {
           resolve();
           return;
         }
@@ -9113,19 +9164,19 @@ function getDefault(key) {
          */
 
 
-        if (_this5.defaultCountry) {
-          if (typeof _this5.defaultCountry === 'string') {
-            _this5.choose(_this5.defaultCountry);
+        if (_this6.defaultCountry) {
+          if (typeof _this6.defaultCountry === 'string') {
+            _this6.choose(_this6.defaultCountry);
 
             resolve();
             return;
           }
 
-          if (typeof _this5.defaultCountry === 'number') {
-            var country = _this5.findCountryByDialCode(_this5.defaultCountry);
+          if (typeof _this6.defaultCountry === 'number') {
+            var country = _this6.findCountryByDialCode(_this6.defaultCountry);
 
             if (country) {
-              _this5.choose(country.iso2);
+              _this6.choose(country.iso2);
 
               resolve();
               return;
@@ -9133,21 +9184,21 @@ function getDefault(key) {
           }
         }
 
-        var fallbackCountry = _this5.preferredCountries[0] || _this5.filteredCountries[0];
+        var fallbackCountry = _this6.preferredCountries[0] || _this6.filteredCountries[0];
         /**
          * 3. Check if fetching country based on user's IP is allowed, set it as the default country
          */
 
-        if (_this5.autoDefaultCountry) {
+        if (_this6.autoDefaultCountry) {
           getCountry().then(function (res) {
-            _this5.choose(res || _this5.activeCountryCode);
+            _this6.choose(res || _this6.activeCountryCode);
           }).catch(function (error) {
             console.warn(error);
             /**
              * 4. Use the first country from preferred list (if available) or all countries list
              */
 
-            _this5.choose(fallbackCountry);
+            _this6.choose(fallbackCountry);
           }).then(function () {
             resolve();
           });
@@ -9155,7 +9206,7 @@ function getDefault(key) {
           /**
            * 4. Use the first country from preferred list (if available) or all countries list
            */
-          _this5.choose(fallbackCountry);
+          _this6.choose(fallbackCountry);
 
           resolve();
         }
@@ -9166,11 +9217,11 @@ function getDefault(key) {
      * Get the list of countries from the list of iso2 code
      */
     getCountries: function getCountries() {
-      var _this6 = this;
+      var _this7 = this;
 
       var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       return list.map(function (countryCode) {
-        return _this6.findCountry(countryCode);
+        return _this7.findCountry(countryCode);
       }).filter(Boolean);
     },
     findCountry: function findCountry() {
@@ -9289,18 +9340,21 @@ function getDefault(key) {
     focus: function focus() {
       this.$refs.input.focus();
     },
-    toggleDropdown: function toggleDropdown() {
-      if (this.disabled || this.dropdownOptions.disabled) {
+    toggleDropdown: function toggleDropdown(e) {
+      var _e$path, _e$path$;
+
+      if (this.disabled || this.dropdownOptions.disabled || (e === null || e === void 0 ? void 0 : (_e$path = e.path) === null || _e$path === void 0 ? void 0 : (_e$path$ = _e$path[0]) === null || _e$path$ === void 0 ? void 0 : _e$path$.type) === 'text') {
         return;
       }
 
+      this.searchQuery = '';
       this.open = !this.open;
     },
     clickedOutside: function clickedOutside() {
       this.open = false;
     },
     keyboardNav: function keyboardNav(e) {
-      var _this7 = this;
+      var _this8 = this;
 
       if (e.keyCode === 40) {
         // down arrow
@@ -9314,6 +9368,7 @@ function getDefault(key) {
         }
 
         var selEle = this.$refs.list.children[this.selectedIndex];
+        selEle.focus();
 
         if (selEle.offsetTop + selEle.clientHeight > this.$refs.list.scrollTop + this.$refs.list.clientHeight) {
           this.$refs.list.scrollTop = selEle.offsetTop - this.$refs.list.clientHeight + selEle.clientHeight;
@@ -9331,6 +9386,8 @@ function getDefault(key) {
 
         var _selEle = this.$refs.list.children[this.selectedIndex];
 
+        _selEle.focus();
+
         if (_selEle.offsetTop < this.$refs.list.scrollTop) {
           this.$refs.list.scrollTop = _selEle.offsetTop;
         }
@@ -9346,11 +9403,11 @@ function getDefault(key) {
         this.typeToFindInput += e.key;
         clearTimeout(this.typeToFindTimer);
         this.typeToFindTimer = setTimeout(function () {
-          _this7.typeToFindInput = '';
+          _this8.typeToFindInput = '';
         }, 700); // don't include preferred countries so we jump to the right place in the alphabet
 
         var typedCountryI = this.sortedCountries.slice(this.preferredCountries.length).findIndex(function (c) {
-          return c.name.toLowerCase().startsWith(_this7.typeToFindInput);
+          return c.name.toLowerCase().startsWith(_this8.typeToFindInput);
         });
 
         if (typedCountryI >= 0) {