search

iamstevendao / vue-tel-input

International Telephone Input with Vue
https://iamstevendao.com/vue-tel-input/
MIT License
815 stars 341 forks source link

validate event not trigger with a paste on the input #188

Open Yummy123123 opened 4 years ago

Yummy123123 commented 4 years ago

If I copy/paste a phone number inside the input, the validate event is not triggered. I had to use input event in order to trigger my code.

Daniel4Digital commented 4 years ago

+1, I can't trigger no matter what.

Daniel4Digital commented 4 years ago

Only way I got was via refs: this.$refs.tel_input.choose(this.bindProps.defaultCountry, true);

But it should be able to detect the change on the input field...

iamstevendao commented 4 years ago

@Daniel4Digital @Yummy123123 Can you guys provide steps to reproduce it? I think the paste event will trigger the @input event.

Daniel4Digital commented 4 years ago

I will try to create an codepen. No promises though, my time is running out for this.

Any case, what you can try is to select a country, or put PT as the default country. Doesn't matter how it loads the default country. So, when you're on the form with any country except Brazil, since we will add a Brazil number for this test, let say you copy paste a number like this +552152120225 (Brazil number) The country is not updated.

Another problem related is. Let say you've autocomplete with a Brazilian number "+552152120225" it will put the number 2152120225 on the field without being able to change the country.

And another related issue with this last one is that, if after the autocomplete number is in place, you try to write +55 (instead of selecting the country), You start with +5 and the flag changes to mexico since it is finding the +52 since the number now is "+52152120225", then we hit the 2nd 5, the number is masked with the Brazilian number BUT! the flag is still mexico.

This means that the PhoneObject is not being passed correctly when it should.

Hope this info can help you reproducing it.

brockdusome commented 4 years ago

I had this issue also, I resolved it by putting a ref on the input, and then calling onInput() on this.$nextTick() which correctly triggered all of the input logic and validation.

this.$nextTick(function() {
  this.$refs.phoneInput.onInput()
})

There's probably a simple PR to make here that would watch the input value and fire this method more reliably on an paste/autofill event.

pethog77 commented 5 months ago

Bumping this. Kind of surprised this use case hasn't been merged in to the base package yet.

TravisAlexandra commented 2 months ago

I have the same issue in Vue3, composition api. @brockdusome can you please tell me where should I call the nextTick function in my case?