From cc232a08e78a5b44933ccebb8c25ff9f58e4d01a Mon Sep 17 00:00:00 2001 From: 289Adam289 Date: Thu, 5 Dec 2024 19:39:21 +0100 Subject: [PATCH 1/2] add autoCapitalize prop and comments --- src/components/AmountForm.tsx | 3 +++ src/components/AmountTextInput.tsx | 3 +++ src/components/AmountWithoutCurrencyForm.tsx | 4 ++++ src/components/PercentageForm.tsx | 3 +++ .../components/BankAccountValidationForm.tsx | 5 +++++ 5 files changed, 18 insertions(+) diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx index a230dfa1af8d..cf1b5b934324 100644 --- a/src/components/AmountForm.tsx +++ b/src/components/AmountForm.tsx @@ -259,6 +259,9 @@ function AmountForm( prefixCharacter={currency} prefixStyle={styles.colorMuted} keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD} + // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag. + // See https://github.com/Expensify/App/issues/51868 for more information + autoCapitalize="words" inputMode={CONST.INPUT_MODE.DECIMAL} errorText={errorText} // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx index 52c32ce1f584..6be2b43c09d7 100644 --- a/src/components/AmountTextInput.tsx +++ b/src/components/AmountTextInput.tsx @@ -71,6 +71,9 @@ function AmountTextInput( value={formattedAmount} placeholder={placeholder} inputMode={CONST.INPUT_MODE.DECIMAL} + // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag. + // See https://github.com/Expensify/App/issues/51868 for more information + autoCapitalize="words" blurOnSubmit={false} selection={selection} onSelectionChange={onSelectionChange} diff --git a/src/components/AmountWithoutCurrencyForm.tsx b/src/components/AmountWithoutCurrencyForm.tsx index 78b7c84ecb54..b212f757b5cc 100644 --- a/src/components/AmountWithoutCurrencyForm.tsx +++ b/src/components/AmountWithoutCurrencyForm.tsx @@ -55,6 +55,10 @@ function AmountWithoutCurrencyForm( role={role} ref={ref} keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD} + inputMode="decimal" + // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag. + // See https://github.com/Expensify/App/issues/51868 for more information + autoCapitalize="words" // eslint-disable-next-line react/jsx-props-no-spreading {...rest} /> diff --git a/src/components/PercentageForm.tsx b/src/components/PercentageForm.tsx index 76e3b19891c4..4ea313cbf58e 100644 --- a/src/components/PercentageForm.tsx +++ b/src/components/PercentageForm.tsx @@ -67,6 +67,9 @@ function PercentageForm({value: amount, errorText, onInputChange, label, ...rest }} suffixCharacter="%" keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD} + // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag. + // See https://github.com/Expensify/App/issues/51868 for more information + autoCapitalize="words" // eslint-disable-next-line react/jsx-props-no-spreading {...rest} /> diff --git a/src/pages/ReimbursementAccount/ConnectBankAccount/components/BankAccountValidationForm.tsx b/src/pages/ReimbursementAccount/ConnectBankAccount/components/BankAccountValidationForm.tsx index 6d9894f5308c..fb878606aad9 100644 --- a/src/pages/ReimbursementAccount/ConnectBankAccount/components/BankAccountValidationForm.tsx +++ b/src/pages/ReimbursementAccount/ConnectBankAccount/components/BankAccountValidationForm.tsx @@ -96,6 +96,8 @@ function BankAccountValidationForm({requiresTwoFactorAuth, reimbursementAccount, }, [reimbursementAccount, policyID, permittedDecimalSeparator], ); + // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag. + // See https://github.com/Expensify/App/issues/51868 for more information return ( @@ -123,6 +126,7 @@ function BankAccountValidationForm({requiresTwoFactorAuth, reimbursementAccount, shouldSaveDraft containerStyles={[styles.mb6]} inputMode={CONST.INPUT_MODE.DECIMAL} + autoCapitalize="words" label={`${translate('connectBankAccountStep.validationInputLabel')} 2`} maxLength={CONST.VALIDATION_REIMBURSEMENT_INPUT_LIMIT} /> @@ -132,6 +136,7 @@ function BankAccountValidationForm({requiresTwoFactorAuth, reimbursementAccount, inputID={INPUT_IDS.AMOUNT3} containerStyles={[styles.mb6]} inputMode={CONST.INPUT_MODE.DECIMAL} + autoCapitalize="words" label={`${translate('connectBankAccountStep.validationInputLabel')} 3`} maxLength={CONST.VALIDATION_REIMBURSEMENT_INPUT_LIMIT} /> From 1ded5ce90478866bce7c4746d50b370f7ac39b2a Mon Sep 17 00:00:00 2001 From: 289Adam289 Date: Wed, 11 Dec 2024 09:45:48 +0100 Subject: [PATCH 2/2] remove unnecessary line --- src/components/AmountWithoutCurrencyForm.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AmountWithoutCurrencyForm.tsx b/src/components/AmountWithoutCurrencyForm.tsx index b212f757b5cc..0ac410013214 100644 --- a/src/components/AmountWithoutCurrencyForm.tsx +++ b/src/components/AmountWithoutCurrencyForm.tsx @@ -55,7 +55,6 @@ function AmountWithoutCurrencyForm( role={role} ref={ref} keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD} - inputMode="decimal" // On android autoCapitalize="words" is necessary when keyboardType="decimal-pad" or inputMode="decimal" to prevent input lag. // See https://github.com/Expensify/App/issues/51868 for more information autoCapitalize="words"