From b34aa65a21d639652df5a04af5d4a9aea692c66f Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Thu, 24 Jul 2025 23:23:10 +0700 Subject: [PATCH 1/2] fix: per diem amount section displays alpha numeric keypad --- src/components/AmountWithoutCurrencyInput.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/AmountWithoutCurrencyInput.tsx b/src/components/AmountWithoutCurrencyInput.tsx index b533743d2c8f..32028ad5ed44 100644 --- a/src/components/AmountWithoutCurrencyInput.tsx +++ b/src/components/AmountWithoutCurrencyInput.tsx @@ -67,9 +67,10 @@ function AmountWithoutCurrencyInput( accessibilityLabel={accessibilityLabel} role={role} ref={ref} - keyboardType={!shouldAllowNegative ? CONST.KEYBOARD_TYPE.DECIMAL_PAD : undefined} + keyboardType={CONST.KEYBOARD_TYPE.DECIMAL_PAD} type="mask" mask={shouldAllowNegative ? `[~][99999999]${separator}[09]` : `[09999999]${separator}[09]`} + inputMode={CONST.INPUT_MODE.DECIMAL} customNotations={customMask} allowedKeys="0123456789.,-" validationRegex={'^-?(?!.*[.,].*[.,])\\d{0,8}(?:[.,]\\d{0,2})?$'} From 27b2b41c2588f058a5511e462025ee60e13ef21a Mon Sep 17 00:00:00 2001 From: mkzie2 Date: Wed, 6 Aug 2025 14:46:18 +0700 Subject: [PATCH 2/2] update keyboard type for IOS --- src/CONST/index.ts | 1 + src/components/AmountWithoutCurrencyInput.tsx | 8 +++++--- src/libs/getAmountInputKeyboard/index.android.ts | 11 +++++++++++ src/libs/getAmountInputKeyboard/index.desktop.ts | 11 +++++++++++ src/libs/getAmountInputKeyboard/index.ios.ts | 11 +++++++++++ src/libs/getAmountInputKeyboard/index.ts | 12 ++++++++++++ src/libs/getAmountInputKeyboard/type.ts | 9 +++++++++ 7 files changed, 60 insertions(+), 3 deletions(-) create mode 100644 src/libs/getAmountInputKeyboard/index.android.ts create mode 100644 src/libs/getAmountInputKeyboard/index.desktop.ts create mode 100644 src/libs/getAmountInputKeyboard/index.ios.ts create mode 100644 src/libs/getAmountInputKeyboard/index.ts create mode 100644 src/libs/getAmountInputKeyboard/type.ts diff --git a/src/CONST/index.ts b/src/CONST/index.ts index a16fca06f879..f241fde9e79d 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -1790,6 +1790,7 @@ const CONST = { ASCII_CAPABLE: 'ascii-capable', NUMBER_PAD: 'number-pad', DECIMAL_PAD: 'decimal-pad', + NUMBERS_AND_PUNCTUATION: 'numbers-and-punctuation', }, INPUT_MODE: { diff --git a/src/components/AmountWithoutCurrencyInput.tsx b/src/components/AmountWithoutCurrencyInput.tsx index 32028ad5ed44..da1f3855dcf1 100644 --- a/src/components/AmountWithoutCurrencyInput.tsx +++ b/src/components/AmountWithoutCurrencyInput.tsx @@ -1,8 +1,8 @@ import React, {useCallback, useMemo} from 'react'; import type {ForwardedRef} from 'react'; import useLocalize from '@hooks/useLocalize'; +import getAmountInputKeyboard from '@libs/getAmountInputKeyboard'; import {replaceAllDigits, replaceCommasWithPeriod, stripSpacesFromAmount} from '@libs/MoneyRequestUtils'; -import CONST from '@src/CONST'; import TextInput from './TextInput'; import type {BaseTextInputProps, BaseTextInputRef} from './TextInput/BaseTextInput/types'; @@ -57,6 +57,8 @@ function AmountWithoutCurrencyInput( }, ]; + const {keyboardType, inputMode} = getAmountInputKeyboard(shouldAllowNegative); + return ( { + return { + keyboardType: CONST.KEYBOARD_TYPE.DECIMAL_PAD, + inputMode: CONST.INPUT_MODE.DECIMAL, + }; +}; + +export default getAmountInputKeyboard; diff --git a/src/libs/getAmountInputKeyboard/index.desktop.ts b/src/libs/getAmountInputKeyboard/index.desktop.ts new file mode 100644 index 000000000000..26817b1ebd1b --- /dev/null +++ b/src/libs/getAmountInputKeyboard/index.desktop.ts @@ -0,0 +1,11 @@ +import CONST from '@src/CONST'; +import type GetAmountInputKeyboard from './type'; + +const getAmountInputKeyboard: GetAmountInputKeyboard = () => { + return { + keyboardType: CONST.KEYBOARD_TYPE.DECIMAL_PAD, + inputMode: CONST.INPUT_MODE.DECIMAL, + }; +}; + +export default getAmountInputKeyboard; diff --git a/src/libs/getAmountInputKeyboard/index.ios.ts b/src/libs/getAmountInputKeyboard/index.ios.ts new file mode 100644 index 000000000000..fffd4c6494c3 --- /dev/null +++ b/src/libs/getAmountInputKeyboard/index.ios.ts @@ -0,0 +1,11 @@ +import CONST from '@src/CONST'; +import type GetAmountInputKeyboard from './type'; + +const getAmountInputKeyboard: GetAmountInputKeyboard = (shouldAllowNegative = false) => { + return { + keyboardType: shouldAllowNegative ? CONST.KEYBOARD_TYPE.NUMBERS_AND_PUNCTUATION : CONST.KEYBOARD_TYPE.DECIMAL_PAD, + inputMode: shouldAllowNegative ? undefined : CONST.INPUT_MODE.DECIMAL, + }; +}; + +export default getAmountInputKeyboard; diff --git a/src/libs/getAmountInputKeyboard/index.ts b/src/libs/getAmountInputKeyboard/index.ts new file mode 100644 index 000000000000..7ff39864e0d2 --- /dev/null +++ b/src/libs/getAmountInputKeyboard/index.ts @@ -0,0 +1,12 @@ +import {isMobileIOS} from '@libs/Browser'; +import CONST from '@src/CONST'; +import type GetAmountInputKeyboard from './type'; + +const getAmountInputKeyboard: GetAmountInputKeyboard = (shouldAllowNegative = false) => { + return { + keyboardType: isMobileIOS() && shouldAllowNegative ? CONST.KEYBOARD_TYPE.NUMBERS_AND_PUNCTUATION : CONST.KEYBOARD_TYPE.DECIMAL_PAD, + inputMode: isMobileIOS() && shouldAllowNegative ? undefined : CONST.INPUT_MODE.DECIMAL, + }; +}; + +export default getAmountInputKeyboard; diff --git a/src/libs/getAmountInputKeyboard/type.ts b/src/libs/getAmountInputKeyboard/type.ts new file mode 100644 index 000000000000..cd8ac3f32aad --- /dev/null +++ b/src/libs/getAmountInputKeyboard/type.ts @@ -0,0 +1,9 @@ +import type {ValueOf} from 'type-fest'; +import type CONST from '@src/CONST'; + +type GetAmountInputKeyboard = (shouldAllowNegative?: boolean) => { + keyboardType: ValueOf | undefined; + inputMode: ValueOf | undefined; +}; + +export default GetAmountInputKeyboard;