vue-tel-input icon indicating copy to clipboard operation
vue-tel-input copied to clipboard

validate event not trigger with a paste on the input

Open Yummy123123 opened this issue 4 years ago • 6 comments

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.

Yummy123123 avatar May 05 '20 14:05 Yummy123123

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

Daniel4Digital avatar May 06 '20 19:05 Daniel4Digital

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...

Daniel4Digital avatar May 06 '20 20:05 Daniel4Digital

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

iamstevendao avatar May 10 '20 13:05 iamstevendao

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.

Daniel4Digital avatar May 11 '20 11:05 Daniel4Digital

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.

brockdusome avatar May 19 '20 12:05 brockdusome