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..0ac410013214 100644 --- a/src/components/AmountWithoutCurrencyForm.tsx +++ b/src/components/AmountWithoutCurrencyForm.tsx @@ -55,6 +55,9 @@ function AmountWithoutCurrencyForm( role={role} ref={ref} 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/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} />