vue-tel-input
vue-tel-input copied to clipboard
A pasted phone number is causing page to crash
When selecting the country Singapore and pasting this phone number 006591234567
, the page will crash and we will see a "Page Unresponsive" error. The same error occurs when you start typing the phone number in as well. I am aware that this phone number is not formatted correctly, but I would expect it to return valid: false
instead of crashing.
The issue is also reproducible on the demo website: https://vue-tel-input.iamstevendao.com/ Steps to Reproduce:
- Click on Show Options
- Uncheck
inputOptions.showDialCode
- Change country to Singapore
- Start typing in the phone number or paste it:
006591234567
When using this in my local environment, the page does not crash but I see this warning message.
I recently learned that a double 0 before the phone number is the international dialing prefix for many counties. I spot checked a few other countries with the same problematic phone number above and was able to reproduce the issue in a few them. I've listed out the results below. I was not able to find a pattern between the occurrence of the crash, the country code, and the international dialing prefix.
I've implemented a workaround fix in my repo that will handle a 00
in front of a phone number before it is sent to this package.
<template>
<div @paste.prevent="pasteEvent">
<vue-tel-input
:value="cleanMobileNumber"
>
</div>
</template>
<script>
import { VueTelInput } from 'vue-tel-input'
export default {
props: {
mobileNumber: {
type: String,
required: true,
},
},
watch: {
mobileNumber(newValue) {
this.reformatMobileNumber(newValue)
},
},
computed: {
pasteEvent(event) {
this.reformatMobileNumber(event.clipboardData.getData('text'))
},
reformatMobileNumber(inputValue) {
this.cleanMobileNumber = inputValue.replace(/^00/, '')
},
},
}
</script>
@pragathishankar wow, thank you! that's a lot of effort. Are you interested in creating a PR for this issue? Otherwise, it'd be the next thing on my todo list!
@iamstevendao I am actually interested in investigating a PR for this! However, it's a little lower on my to-do list. I can open up a draft PR that we can both contribute to?