teidesu/mtcute-repl
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Gracefully handle pasting phone numbers without plus sign

Browse source
This commit is contained in:
Полина 2025-01-18 13:28:13 +03:00
parent 3d475550b9
commit 21f75a4a3f
1 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
packages/repl/src/components/settings/login/PhoneInput.tsx
View file

@ -66,7 +66,8 @@ export function PhoneInput(props: PhoneInputProps) {
// try to find matching country code // try to find matching country code
// first sanitize input // first sanitize input
const rawPhone = value.slice(1).replace(/\D/g, '') const rawPhone = value[0] === '+' ? value.slice(1) : value
const sanitizedPhone = rawPhone.replace(/\D/g, '')
el.value = `+${value.replace(/[^\d ]/g, '')}` el.value = `+${value.replace(/[^\d ]/g, '')}`
// pass 1: find matching countries by country code // pass 1: find matching countries by country code
@ -75,7 +76,7 @@ export function PhoneInput(props: PhoneInputProps) {
for (const country of countriesList()) { for (const country of countriesList()) {
for (const code of country.countryCodes) { for (const code of country.countryCodes) {
if (rawPhone.startsWith(code.countryCode)) { if (sanitizedPhone.startsWith(code.countryCode)) {
matching.push([country, code]) matching.push([country, code])
} }
if (code.prefixes) { if (code.prefixes) {
@ -99,7 +100,7 @@ export function PhoneInput(props: PhoneInputProps) {
if (code.prefixes === undefined) continue if (code.prefixes === undefined) continue
for (const prefix of code.prefixes) { for (const prefix of code.prefixes) {
const fullPrefix = code.countryCode + prefix const fullPrefix = code.countryCode + prefix
if (rawPhone.startsWith(fullPrefix)) { if (sanitizedPhone.startsWith(fullPrefix)) {
match = item match = item
foundByPrefix = true foundByPrefix = true
break break
@ -108,7 +109,7 @@ export function PhoneInput(props: PhoneInputProps) {
} }
// 3: if we couldnt refine and the country code is the same as countryCode, do nothing // 3: if we couldnt refine and the country code is the same as countryCode, do nothing
if (!foundByPrefix && match && match[1].countryCode === rawPhone) { if (!foundByPrefix && match && match[1].countryCode === sanitizedPhone) {
match = undefined match = undefined
} }
@ -118,11 +119,11 @@ export function PhoneInput(props: PhoneInputProps) {
} }
setChosenCode(chosenCode) setChosenCode(chosenCode)
props.onChange?.(rawPhone) props.onChange?.(sanitizedPhone)
if (chosenCode && chosenCode.patterns) { if (chosenCode && chosenCode.patterns) {
// format the number // format the number
const numberWithoutCode = rawPhone.slice(chosenCode.countryCode.length) const numberWithoutCode = sanitizedPhone.slice(chosenCode.countryCode.length)
for (const pattern of chosenCode.patterns) { for (const pattern of chosenCode.patterns) {
let numberIdx = 0 let numberIdx = 0