ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-07-01 16:25:12 +03:00
parent 58b984aaa0
commit 114d927b88
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/auth/AuthPhoneNumber.tsx
View File

@ -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) {
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<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"

3
src/components/ui/InputText.tsx
View File

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