diff --git a/src/components/payment/CardInput.tsx b/src/components/payment/CardInput.tsx index 71e178ee6..635e15dea 100644 --- a/src/components/payment/CardInput.tsx +++ b/src/components/payment/CardInput.tsx @@ -42,10 +42,7 @@ const CardInput : FC = ({ value, error, onChange }) => { const newCardType = detectCardType(e.target.value); setCardType(newCardType); onChange(newValue); - if (cardNumberRef.current) { - cardNumberRef.current.value = newValue; - } - }, [onChange, cardNumberRef]); + }, [onChange]); const cardIcon = getCardIcon(cardType); @@ -61,6 +58,7 @@ const CardInput : FC = ({ value, error, onChange }) => { error={error} tabIndex={0} maxLength={CARD_NUMBER_MAX_LENGTH} + teactExperimentControlled /> {cardIcon} diff --git a/src/components/payment/ExpiryInput.tsx b/src/components/payment/ExpiryInput.tsx index b42164736..65f648f10 100644 --- a/src/components/payment/ExpiryInput.tsx +++ b/src/components/payment/ExpiryInput.tsx @@ -1,5 +1,5 @@ import type { FC } from '../../lib/teact/teact'; -import React, { memo, useCallback, useRef } from '../../lib/teact/teact'; +import React, { memo, useCallback } from '../../lib/teact/teact'; import { formatCardExpiry } from '../middle/helpers/inputFormatters'; @@ -16,33 +16,27 @@ export type OwnProps = { const ExpiryInput : FC = ({ value, error, onChange }) => { const lang = useLang(); - // eslint-disable-next-line no-null/no-null - const expiryInputRef = useRef(null); - - const handleKeyDown = useCallback((e) => { - if (e.key === 'Backspace' && value.charAt(value.length - 1) === '/') { - const newValue = value.slice(0, value.length - 1); - if (expiryInputRef.current) { - expiryInputRef.current.value = newValue; - } - } - }, [value]); const handleChange = useCallback((e) => { - onChange(formatCardExpiry(e.target.value)); - }, [onChange]); + const newValue = e.target.value; + // Allow deleting separator + if (value.endsWith('/') && value.length > newValue.length) { + onChange(newValue); + } else { + onChange(formatCardExpiry(e.target.value)); + } + }, [onChange, value]); return ( ); }; diff --git a/src/components/payment/PaymentInfo.tsx b/src/components/payment/PaymentInfo.tsx index 3d28d7137..5ceaa2072 100644 --- a/src/components/payment/PaymentInfo.tsx +++ b/src/components/payment/PaymentInfo.tsx @@ -58,7 +58,8 @@ const PaymentInfo: FC = ({ }, [dispatch]); const handleCvvChange = useCallback((e) => { - dispatch({ type: 'changeCvvCode', payload: e.target.value }); + const newValue = e.target.value.replace(/[^0-9]/g, ''); + dispatch({ type: 'changeCvvCode', payload: newValue }); }, [dispatch]); const handleCountryChange = useCallback((e) => { @@ -110,6 +111,7 @@ const PaymentInfo: FC = ({ maxLength={3} tabIndex={0} error={formErrors.cvv} + teactExperimentControlled /> { needCountry || needZip ? ( @@ -147,6 +149,7 @@ const PaymentInfo: FC = ({ value={state.billingZip} inputMode="text" tabIndex={0} + maxLength={12} error={formErrors.billingZip} /> )} diff --git a/src/components/payment/PaymentModal.scss b/src/components/payment/PaymentModal.scss index f56da5ecb..6940d928d 100644 --- a/src/components/payment/PaymentModal.scss +++ b/src/components/payment/PaymentModal.scss @@ -30,7 +30,7 @@ } .Transition { - height: 25rem; + height: min(25rem, 60vh); } .empty-content { @@ -54,7 +54,7 @@ } .footer { - position: absolute; + position: relative; bottom: 0; border-bottom-left-radius: var(--border-radius-default-small); border-bottom-right-radius: var(--border-radius-default-small); @@ -75,8 +75,7 @@ .modal-content { padding: 0; - overflow: auto; - overflow: overlay; + overflow: hidden; } } diff --git a/src/components/ui/InputText.tsx b/src/components/ui/InputText.tsx index 0a8a16e48..ac37e633f 100644 --- a/src/components/ui/InputText.tsx +++ b/src/components/ui/InputText.tsx @@ -21,6 +21,7 @@ type OwnProps = { autoComplete?: string; maxLength?: number; tabIndex?: number; + teactExperimentControlled?: boolean; inputMode?: 'text' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'; onChange?: (e: ChangeEvent) => void; onInput?: (e: FormEvent) => void; @@ -45,6 +46,7 @@ const InputText: FC = ({ inputMode, maxLength, tabIndex, + teactExperimentControlled, onChange, onInput, onKeyPress, @@ -87,6 +89,7 @@ const InputText: FC = ({ onBlur={onBlur} onPaste={onPaste} aria-label={labelText} + teactExperimentControlled={teactExperimentControlled} /> {labelText && (