diff --git a/src/libs/getTextInputAutocorrectProps.ts b/src/libs/getTextInputAutocorrectProps.ts new file mode 100644 index 000000000000..e3f69e25c4c3 --- /dev/null +++ b/src/libs/getTextInputAutocorrectProps.ts @@ -0,0 +1,14 @@ +/** + * Returns props that suppress autocorrect, spellcheck, autocomplete, and autocapitalize + * for TextInput components. + */ +function getTextInputAutocorrectProps() { + return { + autoCorrect: false, + spellCheck: false, + autoComplete: 'off' as const, + autoCapitalize: 'none' as const, + }; +} + +export default getTextInputAutocorrectProps; diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx index aaac8cf7c636..4852097b1fe3 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/AccountHolderDetails.tsx @@ -11,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit'; import useThemeStyles from '@hooks/useThemeStyles'; +import getTextInputAutocorrectProps from '@libs/getTextInputAutocorrectProps'; import type BankInfoSubStepProps from '@pages/ReimbursementAccount/NonUSD/BankInfo/types'; import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; import getInputForValueSet from '@pages/ReimbursementAccount/NonUSD/utils/getInputForValueSet'; @@ -119,13 +120,14 @@ function AccountHolderDetails({onNext, isEditing, corpayFields}: BankInfoSubStep ); } + const inputComponent = getInputComponent(field); return ( ); diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx index 294a0963fe8e..2c22b7cdeb44 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/subSteps/BankAccountDetails.tsx @@ -11,6 +11,7 @@ import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit'; import useThemeStyles from '@hooks/useThemeStyles'; +import getTextInputAutocorrectProps from '@libs/getTextInputAutocorrectProps'; import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import type BankInfoSubStepProps from '@pages/ReimbursementAccount/NonUSD/BankInfo/types'; import {getBankInfoStepValues} from '@pages/ReimbursementAccount/NonUSD/utils/getBankInfoStepValues'; @@ -86,13 +87,14 @@ function BankAccountDetails({onNext, isEditing, corpayFields}: BankInfoSubStepPr return getInputForValueSet(field, SafeString(defaultValues[field.id as keyof typeof defaultValues]), isEditing, styles); } + const inputComponent = getInputComponent(field); return ( ); diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountHolderInformation.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountHolderInformation.tsx index fa153a6bf3f5..b16c229d561d 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountHolderInformation.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/AccountHolderInformation.tsx @@ -10,6 +10,7 @@ import ValuePicker from '@components/ValuePicker'; import useInternationalBankAccountFormSubmit from '@hooks/useInternationalBankAccountFormSubmit'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; +import getTextInputAutocorrectProps from '@libs/getTextInputAutocorrectProps'; import type CustomSubPageProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; import {getValidationErrors} from '@pages/settings/Wallet/InternationalDepositAccount/utils'; import Text from '@src/components/Text'; @@ -91,36 +92,40 @@ function AccountHolderInformation({isEditing, onNext, formValues, fieldsMap}: Cu {translate('addPersonalBankAccount.accountHolderInformationStepHeader')} {Object.values(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_HOLDER_DETAILS] ?? {}) .sort((a, b) => CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_FIELDS.indexOf(a.id) - CONST.CORPAY_FIELDS.ACCOUNT_HOLDER_FIELDS.indexOf(b.id)) - .map((field, index) => ( - - - - ))} + .map((field, index) => { + const inputComponent = getInputComponent(field); + return ( + + + + ); + })} ); diff --git a/src/pages/settings/Wallet/InternationalDepositAccount/subPages/BankAccountDetails.tsx b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/BankAccountDetails.tsx index f8b8d86efdd3..c5c0a6cfd1d8 100644 --- a/src/pages/settings/Wallet/InternationalDepositAccount/subPages/BankAccountDetails.tsx +++ b/src/pages/settings/Wallet/InternationalDepositAccount/subPages/BankAccountDetails.tsx @@ -14,6 +14,7 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import getTextInputAutocorrectProps from '@libs/getTextInputAutocorrectProps'; import type CustomSubPageProps from '@pages/settings/Wallet/InternationalDepositAccount/types'; import {getValidationErrors} from '@pages/settings/Wallet/InternationalDepositAccount/utils'; import {fetchCorpayFields} from '@userActions/BankAccounts'; @@ -81,22 +82,26 @@ function BankAccountDetails({isEditing, onNext, onMove, formValues, fieldsMap}: shouldShowFullPageOfflineView /> - {Object.values(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS] ?? {}).map((field) => ( - 0 ? [styles.mhn5, styles.pv1] : [styles.pv2]} - key={field.id} - > - 0 ? ValuePicker : TextInput} - inputID={field.id} - defaultValue={formValues[field.id]} - label={field.label + (field.isRequired ? '' : ` (${translate('common.optional')})`)} - items={(field.valueSet ?? []).map(({id, text}) => ({value: id, label: text}))} - shouldSaveDraft={!isEditing} - forwardedFSClass={CONST.FULLSTORY.CLASS.MASK} - /> - - ))} + {Object.values(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.ACCOUNT_DETAILS] ?? {}).map((field) => { + const isValuePicker = (field.valueSet ?? []).length > 0; + return ( + + ({value: id, label: text}))} + shouldSaveDraft={!isEditing} + forwardedFSClass={CONST.FULLSTORY.CLASS.MASK} + {...(isValuePicker ? {} : getTextInputAutocorrectProps())} + /> + + ); + })} {translate('addPersonalBankAccount.bankInformationStepHeader')} {Object.values(fieldsMap[CONST.CORPAY_FIELDS.PAGE_NAME.BANK_INFORMATION] ?? {}) .sort((a, b) => CONST.CORPAY_FIELDS.BANK_INFORMATION_FIELDS.indexOf(a.id) - CONST.CORPAY_FIELDS.BANK_INFORMATION_FIELDS.indexOf(b.id)) - .map((field, index) => ( - - - - ))} + .map((field, index) => { + const inputComponent = getInputComponent(field); + return ( + + + + ); + })} );