Merge pull request Expensify#67106 from mkzie2/mkzie2-issue/66705

fix: per diem amount section displays alpha numeric keypad

Author: mollfpr

src/CONST/index.ts

@@ -1786,6 +1786,7 @@ const CONST = {
         ASCII_CAPABLE: 'ascii-capable',
         NUMBER_PAD: 'number-pad',
         DECIMAL_PAD: 'decimal-pad',
+        NUMBERS_AND_PUNCTUATION: 'numbers-and-punctuation',
     },
 
     INPUT_MODE: {

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 (
         <TextInput
             inputID={inputID}
@@ -67,7 +69,8 @@ function AmountWithoutCurrencyInput(
             accessibilityLabel={accessibilityLabel}
             role={role}
             ref={ref}
-            keyboardType={!shouldAllowNegative ? CONST.KEYBOARD_TYPE.DECIMAL_PAD : undefined}
+            keyboardType={keyboardType}
+            inputMode={inputMode}
             type="mask"
             mask={shouldAllowNegative ? `[~][99999999]${separator}[09]` : `[09999999]${separator}[09]`}
             customNotations={customMask}

src/libs/getAmountInputKeyboard/index.android.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;

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;

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;

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;

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<typeof CONST.KEYBOARD_TYPE> | undefined;
+    inputMode: ValueOf<typeof CONST.INPUT_MODE> | undefined;
+};
+
+export default GetAmountInputKeyboard;