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

A pasted phone number is causing page to crash

Open pragathishankar opened this issue 1 year ago • 4 comments

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. Screen Shot 2022-08-01 at 4 26 06 PM

The issue is also reproducible on the demo website: https://vue-tel-input.iamstevendao.com/ Steps to Reproduce:

  1. Click on Show Options
  2. Uncheck inputOptions.showDialCode
  3. Change country to Singapore
  4. Start typing in the phone number or paste it: 006591234567 Screen Shot 2022-07-27 at 4 09 06 PM

When using this in my local environment, the page does not crash but I see this warning message. Screen Shot 2022-08-01 at 4 35 17 PM

pragathishankar avatar Aug 01 '22 23:08 pragathishankar

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. 184973603-d6710b0a-e700-469f-a113-29da25c3d86f

pragathishankar avatar Aug 16 '22 19:08 pragathishankar

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 avatar Aug 25 '22 16:08 pragathishankar

@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 avatar Aug 28 '22 12:08 iamstevendao

@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?

pragathishankar avatar Aug 29 '22 21:08 pragathishankar