Auth Phone Number: Fix iOS auto-complete dropping country code

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<StateProps & DispatchProps> = ({
   const inputRef = useRef<HTMLInputElement>(null);
 
   const [country, setCountry] = useState<Country | undefined>();
-  const [phoneNumber, setPhoneNumber] = useState<string>();
+  const [phoneNumber, setPhoneNumber] = useState<string | undefined>();
   const [isTouched, setIsTouched] = useState(false);
   const [lastSelection, setLastSelection] = useState<[number, number] | undefined>();
 
@@ -77,14 +77,16 @@ const AuthPhoneNumber: FC<StateProps & DispatchProps> = ({
   }, [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) {
+    if (!country || (selectedCountry && selectedCountry.code !== country.code)) {
-      setCountry(undefined);
-    } else if (!country || (selectedCountry && selectedCountry.code !== country.code)) {
       setCountry(selectedCountry);
     }
 
@@ -103,6 +105,14 @@ const AuthPhoneNumber: FC<StateProps & DispatchProps> = ({
     }
   }, [lastSelection]);
 
+  const isJustPastedRef = useRef(false);
+  const handlePaste = useCallback(() => {
+    isJustPastedRef.current = true;
+    requestAnimationFrame(() => {
+      isJustPastedRef.current = false;
+    });
+  }, []);
+
   const handlePhoneNumberChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     if (authError) {
       clearAuthError();
@@ -123,8 +133,13 @@ const AuthPhoneNumber: FC<StateProps & DispatchProps> = ({
     );
 
     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<HTMLInputElement>) => {
     setAuthRememberMe(e.target.checked);
@@ -168,6 +183,7 @@ const AuthPhoneNumber: FC<StateProps & DispatchProps> = ({
             error={authError}
             inputMode="tel"
             onChange={handlePhoneNumberChange}
+            onPaste={IS_SAFARI ? handlePaste : undefined}
           />
           <Checkbox
             id="sign-in-keep-session"

src/components/ui/InputText.tsx

@@ -23,6 +23,7 @@ type OwnProps = {
   onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onPaste?: (e: React.ClipboardEvent<HTMLInputElement>) => void;
 };
 
 const InputText: FC<OwnProps> = ({
@@ -44,6 +45,7 @@ const InputText: FC<OwnProps> = ({
   onKeyPress,
   onKeyDown,
   onBlur,
+  onPaste,
 }) => {
   const lang = useLang();
   const labelText = error || success || label;
@@ -77,6 +79,7 @@ const InputText: FC<OwnProps> = ({
         onKeyPress={onKeyPress}
         onKeyDown={onKeyDown}
         onBlur={onBlur}
+        onPaste={onPaste}
       />
       {labelText && (
         <label htmlFor={id}>{labelText}</label>