Merge pull request Expensify#65006 from aadil42/issues/63127/emoji-alphabet-brifely-shown-in-per-diem-field-verified-commits

Preventing brief occurrences of emojis and non-digit chars.

Author: amyevans

src/components/AmountWithoutCurrencyForm.tsx

@@ -45,6 +45,18 @@ function AmountWithoutCurrencyInput(
         [onInputChange],
     );
 
+    // Add custom notation for using '-' character in the mask.
+    // If we only use '-' for characterSet instead of '0123456789.-'
+    // then the first character has to be '-' optionally, but we also want to allow a digit in first position if the value is positive.
+    // More info: https://github.com/IvanIhnatsiuk/react-native-advanced-input-mask?tab=readme-ov-file#custom-notations
+    const customMask = [
+        {
+            character: '~',
+            characterSet: '0123456789.-',
+            isOptional: true,
+        },
+    ];
+
     return (
         <TextInput
             inputID={inputID}
@@ -57,9 +69,10 @@ function AmountWithoutCurrencyInput(
             ref={ref}
             keyboardType={!shouldAllowNegative ? CONST.KEYBOARD_TYPE.DECIMAL_PAD : undefined}
             type="mask"
-            mask={`[09999999]${separator}[09]`}
-            allowedKeys="0123456789.,"
-            validationRegex={'^(?!.*[.,].*[.,])\\d{0,8}(?:[.,]\\d{0,2})?$'}
+            mask={shouldAllowNegative ? `[~][99999999]${separator}[09]` : `[09999999]${separator}[09]`}
+            customNotations={customMask}
+            allowedKeys="0123456789.,-"
+            validationRegex={'^-?(?!.*[.,].*[.,])\\d{0,8}(?:[.,]\\d{0,2})?$'}
             // 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"
@@ -69,6 +82,6 @@ function AmountWithoutCurrencyInput(
     );
 }
 
-AmountWithoutCurrencyInput.displayName = 'AmountWithoutCurrencyForm';
+AmountWithoutCurrencyInput.displayName = 'AmountWithoutCurrencyInput';
 
 export default React.forwardRef(AmountWithoutCurrencyInput);

src/components/AmountWithoutCurrencyInput.tsx

@@ -166,6 +166,9 @@ type CustomBaseTextInputProps = {
     /** The mask of the masked input */
     mask?: MaskedTextInputOwnProps['mask'];
 
+    /** Custom notations for the masked input */
+    customNotations?: MaskedTextInputOwnProps['customNotations'];
+
     /** A set of permitted characters for the input */
     allowedKeys?: MaskedTextInputOwnProps['allowedKeys'];
 

src/components/TextInput/BaseTextInput/types.ts

@@ -1,5 +1,5 @@
 import React, {useCallback} from 'react';
-import AmountWithoutCurrencyForm from '@components/AmountWithoutCurrencyForm';
+import AmountWithoutCurrencyInput from '@components/AmountWithoutCurrencyInput';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
@@ -31,7 +31,7 @@ function EditPerDiemAmountPage({route}: EditPerDiemAmountPageProps) {
     const policyID = route.params.policyID;
     const rateID = route.params.rateID;
     const subRateID = route.params.subRateID;
-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: true});
 
     const customUnit = getPerDiemCustomUnit(policy);
 
@@ -98,13 +98,14 @@ function EditPerDiemAmountPage({route}: EditPerDiemAmountPageProps) {
                 >
                     <InputWrapper
                         ref={inputCallbackRef}
-                        InputComponent={AmountWithoutCurrencyForm}
+                        InputComponent={AmountWithoutCurrencyInput}
                         defaultValue={defaultAmount}
                         label={translate('workspace.perDiem.amount')}
                         accessibilityLabel={translate('workspace.perDiem.amount')}
                         inputID={INPUT_IDS.AMOUNT}
                         role={CONST.ROLE.PRESENTATION}
                         shouldAllowNegative
+                        uncontrolled
                     />
                 </FormProvider>
             </ScreenWrapper>