fix: update text picker validation

src/ONYXKEYS.ts

@@ -608,6 +608,8 @@ const ONYXKEYS = {
         SAGE_INTACCT_DIMENSION_TYPE_FORM_DRAFT: 'sageIntacctDimensionTypeFormDraft',
         SEARCH_ADVANCED_FILTERS_FORM: 'searchAdvancedFiltersForm',
         SEARCH_ADVANCED_FILTERS_FORM_DRAFT: 'searchAdvancedFiltersFormDraft',
+        TEXT_PICKER_MODAL_FORM: 'textPickerModalForm',
+        TEXT_PICKER_MODAL_FORM_DRAFT: 'textPickerModalFormDraft',
     },
 } as const;
 
@@ -681,6 +683,7 @@ type OnyxFormValuesMapping = {
     [ONYXKEYS.FORMS.NETSUITE_CUSTOM_FORM_ID_FORM]: FormTypes.NetSuiteCustomFormIDForm;
     [ONYXKEYS.FORMS.SAGE_INTACCT_DIMENSION_TYPE_FORM]: FormTypes.SageIntacctDimensionForm;
     [ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM]: FormTypes.SearchAdvancedFiltersForm;
+    [ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM]: FormTypes.TextPickerModalForm;
 };
 
 type OnyxFormDraftValuesMapping = {

src/components/TextPicker/TextSelectorModal.tsx

@@ -1,18 +1,19 @@
 import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Keyboard, View} from 'react-native';
 import type {TextInput as TextInputType} from 'react-native';
-import Button from '@components/Button';
+import {Keyboard, View} from 'react-native';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
-import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type {TextSelectorModalProps} from './types';
 import usePaddingStyle from './usePaddingStyle';
 
@@ -27,13 +28,27 @@ function TextSelectorModal({value, description = '', subtitle, onValueSelected,
     const inputValueRef = useRef(value);
     const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+    const inputCallbackRef = (ref: BaseTextInputRef | null) => {
+        inputRef.current = ref;
+    };
+
     const hide = useCallback(() => {
         onClose();
         if (shouldClearOnClose) {
             setValue('');
         }
     }, [onClose, shouldClearOnClose]);
 
+    // In TextPicker, when the modal is hidden, it is not completely unmounted, so when it is shown again, the currentValue is not updated with the value prop.
+    // Therefore, we need to update the currentValue with the value prop when the modal is shown. This is done once when the modal is shown again.
+    useEffect(() => {
+        if (!isVisible) {
+            return;
+        }
+        setValue(value);
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [isVisible]);
+
     useEffect(() => {
         inputValueRef.current = currentValue;
     }, [currentValue]);
@@ -76,36 +91,30 @@ function TextSelectorModal({value, description = '', subtitle, onValueSelected,
                     title={description}
                     onBackButtonPress={hide}
                 />
-                <ScrollView
-                    contentContainerStyle={[styles.flex1, styles.mh5, styles.mb5]}
-                    keyboardShouldPersistTaps="handled"
+                <FormProvider
+                    formID={ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM}
+                    onSubmit={(data) => {
+                        Keyboard.dismiss();
+                        onValueSelected?.(data[rest.inputID ?? ''] ?? '');
+                    }}
+                    submitButtonText={translate('common.save')}
+                    style={[styles.mh5, styles.flex1]}
+                    enabledWhenOffline
                 >
                     <View style={styles.pb4}>{!!subtitle && <Text style={[styles.sidebarLinkText, styles.optionAlternateText]}>{subtitle}</Text>}</View>
-                    <View style={styles.flex1}>
-                        <TextInput
+                    {!!rest.inputID && (
+                        <InputWrapper
+                            ref={inputCallbackRef}
+                            InputComponent={TextInput}
+                            maxLength={CONST.CATEGORY_NAME_LIMIT}
+                            value={currentValue}
+                            onValueChange={(changedValue) => setValue(changedValue.toString())}
                             // eslint-disable-next-line react/jsx-props-no-spreading
                             {...rest}
-                            value={currentValue}
-                            onInputChange={setValue}
-                            ref={(ref) => {
-                                if (!ref) {
-                                    return;
-                                }
-                                inputRef.current = ref;
-                            }}
+                            inputID={rest.inputID}
                         />
-                    </View>
-                    <Button
-                        success
-                        large
-                        pressOnEnter
-                        text={translate('common.save')}
-                        onPress={() => {
-                            Keyboard.dismiss();
-                            onValueSelected?.(currentValue ?? '');
-                        }}
-                    />
-                </ScrollView>
+                    )}
+                </FormProvider>
             </ScreenWrapper>
         </Modal>
     );

src/pages/workspace/reportFields/CreateReportFieldsPage.tsx

@@ -93,6 +93,8 @@ function CreateReportFieldsPage({
         ReportField.setInitialCreateReportFieldsForm();
     }, []);
 
+    const [modal] = useOnyx(ONYXKEYS.MODAL);
+
     return (
         <AccessOrNotFoundWrapper
             accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]}
@@ -119,6 +121,7 @@ function CreateReportFieldsPage({
                     submitButtonText={translate('common.save')}
                     enabledWhenOffline
                     shouldValidateOnBlur={false}
+                    disablePressOnEnter={!!modal?.isVisible}
                 >
                     {({inputValues}) => (
                         <View style={styles.mhn5}>

src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx

@@ -1,6 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import AmountPicker from '@components/AmountPicker';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import FormProvider from '@components/Form/FormProvider';
@@ -35,6 +36,7 @@ function WorkspaceCreateTaxPage({
 }: WorkspaceCreateTaxPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [modal] = useOnyx(ONYXKEYS.MODAL);
 
     const submitForm = useCallback(
         ({value, ...values}: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_NEW_TAX_FORM>) => {
@@ -84,6 +86,7 @@ function WorkspaceCreateTaxPage({
                             submitButtonText={translate('common.save')}
                             enabledWhenOffline
                             shouldValidateOnBlur={false}
+                            disablePressOnEnter={!!modal?.isVisible}
                         >
                             <View style={styles.mhn5}>
                                 <InputWrapper

src/types/form/TextPickerModalForm.ts

@@ -0,0 +1,5 @@
+import type Form from './Form';
+
+type TextPickerModalForm = Form<string, Record<string, string>>;
+
+export default TextPickerModalForm;

src/types/form/index.ts

@@ -64,4 +64,5 @@ export type {NetSuiteTokenInputForm} from './NetSuiteTokenInputForm';
 export type {NetSuiteCustomFormIDForm} from './NetSuiteCustomFormIDForm';
 export type {SearchAdvancedFiltersForm} from './SearchAdvancedFiltersForm';
 export type {EditExpensifyCardLimitForm} from './EditExpensifyCardLimitForm';
+export type {default as TextPickerModalForm} from './TextPickerModalForm';
 export type {default as Form} from './Form';