I can't use search bar on vue-tel-input package

472 Views Asked by At

I follow the vue-tel-input documentation on props here: https://vue-tel-input.iamstevendao.com/documentation/props.html

So, I create an object with dropdownOptions like this:

const dropdownOptions = {
  disabled: false,
  showDialCodeInList: true,
  showDialCodeInSelection: true,
  showFlags: true,
  showSearchBox: true,
  width: '100%'
}

As you can see on the object dropdownOptions.showSearchBox is mark as true.

On the template of the vue.js component the vue-tel input is like this:

<vue-tel-input :dropdownOptions="dropdownOptions"></vue-tel-input>

The dependencies on my package.json are:

"dependencies": {
    "vue": "^3.2.38",
    "vue-tel-input": "^6.0.5",
    "vue-tel-input-vuetify": "^1.5.3"
  },

The main.js is like this:

import { createApp } from 'vue'
import App from './App.vue'
import VueTelInput from 'vue-tel-input'
import 'vue-tel-input/dist/vue-tel-input.css'
const app = createApp(App)
app.use(VueTelInput)
app.mount('#app')

The result is: Image of my vue-tel-input

As you can see the search box doesn't appear.

On the main page of vue-tel-input you can see the search box on action like this:

I don't know exactly why the search box doesn't work for me despite I do as the documentation told me to do. Is like that feature is not on my version of vue-tel-input.

vue-input-tel search box

0

There are 0 best solutions below