diff --git a/src/components/auth/AuthPhoneNumber.tsx b/src/components/auth/AuthPhoneNumber.tsx index 75d460a63..a3252188c 100644 --- a/src/components/auth/AuthPhoneNumber.tsx +++ b/src/components/auth/AuthPhoneNumber.tsx @@ -8,7 +8,7 @@ import React, { FC, memo, useCallback, useEffect, useLayoutEffect, useRef, useState, } from '../../lib/teact/teact'; import { withGlobal } from '../../lib/teact/teactn'; -import { IS_TOUCH_ENV } from '../../util/environment'; +import { IS_SAFARI, IS_TOUCH_ENV } from '../../util/environment'; import { preloadImage } from '../../util/files'; import preloadFonts from '../../util/fonts'; import { pick } from '../../util/iteratees'; @@ -51,7 +51,7 @@ const AuthPhoneNumber: FC = ({ const inputRef = useRef(null); const [country, setCountry] = useState(); - const [phoneNumber, setPhoneNumber] = useState(); + const [phoneNumber, setPhoneNumber] = useState(); const [isTouched, setIsTouched] = useState(false); const [lastSelection, setLastSelection] = useState<[number, number] | undefined>(); @@ -77,14 +77,16 @@ const AuthPhoneNumber: FC = ({ }, [country, authNearestCountry, isTouched]); const parseFullNumber = useCallback((newFullNumber: string) => { + if (!newFullNumber.length) { + setPhoneNumber(''); + } + const suggestedCountry = getCountryFromPhoneNumber(newFullNumber); const selectedCountry = !country || (suggestedCountry && suggestedCountry.id !== country.id) ? suggestedCountry : country; - if (!newFullNumber.length) { - setCountry(undefined); - } else if (!country || (selectedCountry && selectedCountry.code !== country.code)) { + if (!country || (selectedCountry && selectedCountry.code !== country.code)) { setCountry(selectedCountry); } @@ -103,6 +105,14 @@ const AuthPhoneNumber: FC = ({ } }, [lastSelection]); + const isJustPastedRef = useRef(false); + const handlePaste = useCallback(() => { + isJustPastedRef.current = true; + requestAnimationFrame(() => { + isJustPastedRef.current = false; + }); + }, []); + const handlePhoneNumberChange = useCallback((e: ChangeEvent) => { if (authError) { clearAuthError(); @@ -123,8 +133,13 @@ const AuthPhoneNumber: FC = ({ ); setIsTouched(true); - parseFullNumber(value); - }, [authError, clearAuthError, parseFullNumber]); + + const shouldFixSafariAutoComplete = ( + IS_SAFARI && country && fullNumber !== undefined + && value.length - fullNumber.length > 1 && !isJustPastedRef.current + ); + parseFullNumber(shouldFixSafariAutoComplete ? `${country!.code} ${value}` : value); + }, [authError, clearAuthError, country, fullNumber, parseFullNumber]); const handleKeepSessionChange = useCallback((e: ChangeEvent) => { setAuthRememberMe(e.target.checked); @@ -168,6 +183,7 @@ const AuthPhoneNumber: FC = ({ error={authError} inputMode="tel" onChange={handlePhoneNumberChange} + onPaste={IS_SAFARI ? handlePaste : undefined} /> ) => void; onKeyDown?: (e: React.KeyboardEvent) => void; onBlur?: (e: React.FocusEvent) => void; + onPaste?: (e: React.ClipboardEvent) => void; }; const InputText: FC = ({ @@ -44,6 +45,7 @@ const InputText: FC = ({ onKeyPress, onKeyDown, onBlur, + onPaste, }) => { const lang = useLang(); const labelText = error || success || label; @@ -77,6 +79,7 @@ const InputText: FC = ({ onKeyPress={onKeyPress} onKeyDown={onKeyDown} onBlur={onBlur} + onPaste={onPaste} /> {labelText && (