Merge pull request #53647 from software-mansion-labs/289Adam289/51868…

…-fix-decimal-pad-input-lag Fix decimal-pad keyboard input lag on android
Expensify · Dec 11, 2024 · 40a101a · 40a101a
2 parents a166f5a + 1ded5ce
commit 40a101a
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
         <FormProvider
             formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
@@ -114,6 +116,7 @@ function BankAccountValidationForm({requiresTwoFactorAuth, reimbursementAccount,
                     shouldSaveDraft
                     containerStyles={[styles.mb6]}
                     inputMode={CONST.INPUT_MODE.DECIMAL}
+                    autoCapitalize="words"
                     label={`${translate('connectBankAccountStep.validationInputLabel')} 1`}
                     maxLength={CONST.VALIDATION_REIMBURSEMENT_INPUT_LIMIT}
                 />
@@ -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}
                 />