louismazel/vue-phone-number-input

A phone number input made with Vue JS (format & valid phone number)

vue-phone-number-input's Issues

Payload

How do i access the payload data "isValid" to make sure that the value input must be valid before moving to the next step

Change country dinamically

Is there any way to change selected country after the component has been displayed?

I have default-country-code set to:

:default-country-code="phone_country"

When changing phone_country selected country is not changing in the form.

Dark theme incompatibility with disabled

Dark theme works perfectly.
However, setting disabled prop to true disable the dark theme.

As quick and dirty fix, I use pointer-events: none to simulate a read only field:

[Feature Request] Disable "Example" Label

It's possible to provide a prop to disable the "example" Label inside the input field ?

[Feature Request] Set input maxlength based on example format

Hi! I don't know if this feature would be good or not.
Since we are able to show validation of format by changing the color of our input's border, maybe we can activate the max length of the input field based on the example format.

This can be an option if other developers wants to limit it or not because maybe some countries might allow different type of phone number formats. I'm not sure.

Thanks :)

Country code is showing 2 times in input field

i have an issue, please help me to figure out the problem.

i have a phone number value stored in DB as "[phone]", when i fetch the edit phone number form, vue-phone-number-input does not parsing the country code from the v-model and showing country code 2 times.
please see attachment

preferredCountries sort support

now preferredCountries sort is not support,

for example

if the given preferredCountries is ['FR', 'BE', 'DE']

the actual effect is ['BE', DE''FR', '], is sort by the first char.

[Feature Request] Allow to display empty country option in the dropdown

It would be good to have an option to allow to display empty country option in the dropdown.

With an empty Phone number field, the "Phone number" label blocks clicks

In an empty control, if you click on the label in the control that says "Phone number", the control DOES NOT receive focus. If you click to the left, right, top, or bottom of the words "Phone number", though, it does receive focus.

Smaller css file

Component works well, but the css file is 435k. I think the main reason is the base64 images of the country flags. It's making my bundle size too large.

It would be great if you could use unicode country flags instead and get rid of the images -- http://xahlee.info/comp/unicode_flags.html

Starting with version 0.2.5 using vue-phone-number-input in a component causes an error

I include the VuePhoneNumberInput inside another component:

...
<script>

  import VuePhoneNumberInput from 'vue-phone-number-input'

  export default {
    components: {
      vphone: VuePhoneNumberInput,
...

This causes the next error:

"export 'default' (imported as 'VuePhoneNumberInput') was not found in 'vue-phone-number-input'

It happens with version 0.2.5 and higher up to last release.

Remove inline important styles

Inline styles (border 1px solid $color !important, etc) makes customization impossible with CSS.
It is worth adding the ability to disable focus styles like validation styles (no-validator-state).

Input Autofocuses on fetch-country

When fetch-country is true, the input autofocuses. This is probably due to https://github.com/LouisMazel/vue-phone-number-input/pull/64/files#r363379503

How Can I get the country Code In Number

My database design has 2 fields for the phone number one for dial code and the other for the national number so i need these 2 values separately anyone can help me how to extract them separately

expose countryCallingCode via onUpdate(payload)

Edit

On editing, the country code does not match

Add class is-valid when a phone number is valid

I found myself adding a class to my wrapper component in order to apply "is valid" styles (by checking the data returned from update-event). Would prefer that the component itself added this class (semi related to #47 as this would likely clash with is-focused).

Once you have input an area code - you can not delete it

If you enter the first 3 digit area code, you will not be able to backspace and delete it.

[Feature Request] Add EditText customization

Hi.
Thank you for that. Can we add a visual customization if someone want to use vuetify component for example?

[Bug] When country code has 3 numbers it doesn't recognize on prefill

Like portugal (+351), when the prefilled number ([phone]) has the country code of portugal the input doesn't recognize the correct code

in the example bellow the number [phone] was prefilled in the phone-number-input's v-model when page loaded

Unable to set placeholder

<VuePhoneNumberInput placeholder="Place Holder Text" ></VuePhoneNumberInput>

Unable to change the place holder attribute.
"version": "1.0.1",

nvalid prop: type check failed for prop "preferredCountries".

Expected Array, got String with value "['FR', 'BE', 'DE']".

Argentina examples changes to 9

Hello, if you input a number like the example, the second character changes to a 9 automatically...

Try to input 011 15 or 011 11

Also i would like to change argentinian example label, is this possible?

I cannot import to my NUXT project

Here is my set up :

1. npm i --save vue-phone-number-input

2. create vue-phone-number-input.js to /plugins
   import VuePhoneNumberInput from "vue-phone-number-input" import "vue-phone-number-input/dist/vue-phone-number-input.css" Vue.component("vue-phone-number-input", VuePhoneNumberInput)

3. add ~nuxt.config.js
   plugins: [ "~/plugins/vue-phone-number-input" ],

4. in my component
   <VuePhoneNumberInput v-model="phone"/>

Vue warning :
[Vue warn]: Unknown custom element: <VuePhoneNumberInput> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Bug] Only countries feature not working

I've tried working on the only-countries attribute and it seems that it is having issues.

CODE:

RESULT:

Infinite render loop under certain conditions

I am getting an infinite render loop using this component in Framework7 under certain conditions:

vue.runtime.esm.js?2b0e:619 [Vue warn]: You may have an infinite update loop in a component render function.

found in

---> <CountrySelector> at CountrySelector.vue
       <VuePhoneNumberInput> at index.vue
         <F7PageContent>
           <F7Page>
             <PhonePage> at src/components/PhonePage.vue
               <F7View>
                 <F7App>
                   <App> at src/App.vue
                     <Root>

The conditions are:

1. vue-phone-number-input component is registered inline in the parent
2. parent is routed page component module defined in SFC
   If these conditions are different (e.g., global registration, or declared as inline template), then it works fine.

I also observed that if comment out some of the code in CountrySelector's onFocus method, then the error does not occur, although the selector doesn't open either. It seems to be a focus-blur infinite loop, perhaps having to due with how the vue-click-outside directive is used, but I'm not sure.

Here is a repro repo: https://github.com/jacobg/f7-phone-input
Demos:

• infinite loop (you'll need to use Chrome Task Manager to kill it) - https://jacobg.github.io/f7-phone-input
• works fine inline - https://jacobg.github.io/f7-phone-input/inline.html

This issue is not related to issue #2. It occurs regardless of that issue fixed or not.

Here is forum post discussing this issue more at length:
http://forum.framework7.io/t/difference-in-behavior-between-inline-templates-and-sfc-templates/5884

Passing v-model with country code fails

When you pass a phonenumber with country code the component doesn't behave like it should (Select correct country in list, strip countrycode and display correctly)

Veevalidate does not show the validation error mesage for phone number input when used with BootstrapVue

In my Laravel+Vue.js SPA ( Single Page Application) I am using the phone number input validation package from here, BootstrapVue from here and Veevalidate from here .

I think I need to show only the code inside my component file. The vue-phone-number-input component shows blue border and HTML5 error message tooltip (?) upon invalid data but no error message appears in red as it happens with name field. My code follows in EditProfile.vue:

<ValidationObserver ref="form" v-slot="{ passes }">

    <div id="registration_form">

        <b-form @submit.prevent="passes(onSubmit)" @reset="resetForm">

            <ValidationProvider vid="name" rules="required|min:2" name="name" v-slot="{ valid, errors }">
                <b-form-group
                        label="User Name:"
                        label-for="exampleInput1"

                >
                    <b-form-input
                            type="text"
                            v-model="name"
                            :state="errors[0] ? false : (valid ? true : null)"
                            placeholder="Enter your name"
                    ></b-form-input>

                    <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>

                </b-form-group>

            </ValidationProvider>


            <ValidationProvider vid="mobile" rules="required" name="mobile" v-slot="{ valid, errors }">
            <b-form-group
                    label="Mobile:"
                    label-for="exampleInput1"

            >

                <vue-phone-number-input

                        v-model="mobile"
                        default-country-code="BD"
                        required
                        disable-leading-trailing-space
                        :state="errors[0] ? false : (valid ? true : null)"
                        @update="updatePhoneNumber"
                        placeholder="Enter Mobile Number"
                />

               <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>

            </b-form-group>
        </ValidationProvider>



            <b-button type="submit" variant="primary">Submit</b-button>
            <b-button type="reset" variant="danger">Reset</b-button>

        </b-form>

    </div><!-- end of id registration_form-->
</ValidationObserver>`

JS part inside EditProfile.vue is:

`import Datepicker from 'vuejs-datepicker';
import { ValidationObserver, ValidationProvider } from "vee-validate";

export default {
name: "EditProfile",
components: {
ValidationObserver,
ValidationProvider,
Datepicker
},
data: () => ({
name: "",
mobile:""
}),
methods: {

   onSubmit() {
        console.log("Form submitted yay!");
              },

    resetForm() {
        this.name = "";
        this.mobile = "";
        requestAnimationFrame(() => {
            this.$refs.form.reset();
        });
    }

}
};`

When the submit button is pressed then validation works for name field nad for vue-phone-number-input it also happens but no error message shows up in red color.

My Vue.js version is 2.6.10 and I used the latest versions of BootstrapVue and Veevalidate (3) as well.

How can I make the error message appear in red color for vue-phone-number-input element ?

Hello, when I registered vue-phone-number-input multiple times on different components on a page, countries-list did not expand properly.

Add required-attribute

The input element doesn't have the required-attribute, only aria-required, so right now this component does not support HTML5 form validation.

[Feature Request] Add validation when users type letters

When individual types in letters or other characters except for numbers in the field:

Additional form validation should be in place, some suggestions:

• the validation example should pop up already
• there's a way to inform them that numbers only are allowed
• No value is being added in the field and the validation label will pop up, informing them to that numbers are only allowed

Thanks and nice work on this component. :)

In IE 11, cannot change country code unless phone number is entered

A coworker of mine on Windows reported an issue with IE 11 and changing country, you can only change it once, then you're unable to unless you start typing a phone number.

While the phone number is present, you are able to change country freely like in any other browser, but removing it will return back to not being able to change country.

Did not report any console errors.

[FEATURE REQUEST] Port to NativeScript Vue

Is your feature request related to a problem? Please describe

I want to use a phone number input in NativeScript Vue but there is no such module.

Describe the solution you'd like

Maybe it would be possible to port this module to NativeScript. Most likely just the elements need to be changed (e.g. <div>, etc.)

Describe alternatives you've considered

There is no alternative yet.

Country Code List Button Define their type As "Button"

If I am using this input inside a form and going to select a country code then form submit event call because you did not define the type of button (Where to presenting the country code list). I think it is small issue but we can fixed it easily to add the type "button"

How to bind to E.164 number?

First of all, nice component!

This component is a composition of country code and local number. But it seems that the v-model is just the formatted local number. How do I bind the whole thing? Ideally, it would be able to bind to the E.164 phone number, which is the formattedNumber field in the object emitted by onUpdate event.

Clicking a flag submits a form

If you click on a flag it submits the form that is parent to the element.

b030255#r36668986

Doesn't work in IE 11

If you go to https://louismazel.github.io/vue-phone-number-input/, the page doesn't render, and you'll see this error:
Multiple definitions of a property not allowed in strict mode

The error is in the component itself, because my own app using this component also has the error.

Country names

Hi! Is there a way to translate country names?😢

https://github.com/LouisMazel/vue-phone-number-input/blob/master/src/VuePhoneNumberInput/assets/js/phoneCodeCountries.js

Getting Wrong Country Code Selected

Description

Getting Wrong Country Code Selected, It is happened after some time When you start the play with phone number.

A clear and concise description of what the bug is.

Steps to reproduce

Example:

1. Click on country list dropdown
2. Start typing like sin, ind
3. Select a country
4. reopen country list by clicking on dropdown
5. Select any country then you will not get expected result. like if you select India then the random code will reflect on page.

Expected behavior

Same country code should be displayed after selecting from dropdown

Screenshots

Device

• OS: iOS
• Browser: Chrome 75,

(FEATURE REQUEST) Support for Typescript

Is your feature request related to a problem? Please describe

Can't import the component in main.ts. Error:

Could not find a declaration file for module 'vue-phone-number-input'. Try `npm install @types/vue-phone-number-input` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-phone-number-input';`

Describe the solution you'd like

Add declaration file and enable usage with Typescript.

Class lm-text-danger stays after field is valid

I've set the :error-prop because I needed to do some custom validation, however I found that the label is still red even after the component has successfully validated the input.

I feel like .lm-text-danger should only be set if isValid is false and error is true, not just if error is true (I'm just making an assumption that that's how it's being done now). Or alternatively override the CSS for .lm-text-danger when is-valid is present (which is how I solved it).

How to hide the focus border of input fields?

Hi,

Do you have a suggestion how we could hide the border that appears whenever we focus one of the 2 fields (country selector & input field). I have attached a screenshot.
It gets added by an !import inline-style so I can't really set the border to 0 by overriding the css.

I restyled the component a bit for my usecase so it fits better within my vuetify application, but I don't really like the orange border :-)

Thanks

Poor performance on mobile

On mobile phone in Chrome it takes at least 3 seconds to open countries dropdown first time (https://louismazel.github.io/vue-phone-number-input/). Maybe there is a way to improve it, some kind of precaching, etc?

[Feature Request] Automatically recognizing the country code by phone number

I'm excited and disappointed too about this feature 😭

I think it's very important part for phone input component, also It improves user experience, when user just types number and component can automatically recognize the country code.

What you think about it? 🤔

[Feature Request] Option to show the Country Code in the flags/country pulldown

It might be very helpful to show the country code as well as the flag/country name when using the Country Code pulldown. It displays once a country is chosen, but having it also display in the list would be nice. This component is AWESOME!

Add ability to hide country code component

I only need to validate phone numbers against a single country. It would be nice if I could set a default country and hide the country code component altogether.

Class is-focused stays if number is valid

The class is-focused stays after phone number is validated/valid, which makes things look a little weird in my example (here I have clicked off the component, so it shouldn't be focused):

I've fixed it locally by using :focus-selector, but is-focused shouldn't really stay after the element is not focused.

package.json references index.d.ts but it isn't present

package.json contains:

  "types": "dist/index.d.ts"

But, when installed from NPM, this file isn't included.

Thanks.

Unknown custom element: <vuephonenumberinput>

When I try to use this plugin in laravel 5.8, I get an error saying the element is not know recognize the custom element. Is there an issue with the element or am using it wrongly?

Auto choise country

hello! nice plugin.

can I automatically set the country code when a user visits the site? I have an API to get the user's country. and I would like to automatically set the country based on the results of this api