FIX: No required error on Report fields / Taxes > Add field / Add rate > Name input

src/components/TextPicker/TextSelectorModal.tsx

@@ -13,6 +13,7 @@ import TextInput from '@components/TextInput';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {getFieldRequiredErrors} from '@libs/ValidationUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {TextSelectorModalProps} from './types';
@@ -26,6 +27,7 @@ function TextSelectorModal({
     onClose,
     shouldClearOnClose,
     maxLength = CONST.CATEGORY_NAME_LIMIT,
+    required = false,
     ...rest
 }: TextSelectorModalProps) {
     const {translate} = useLocalize();
@@ -50,16 +52,20 @@ function TextSelectorModal({
 
     const validate = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM>) => {
-            const errors: FormInputErrors<typeof ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM> = {};
+            let errors: FormInputErrors<typeof ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM> = {};
             const formValue = values[rest.inputID];
 
+            if (required) {
+                errors = getFieldRequiredErrors(values, [rest.inputID]);
+            }
+
             if (formValue.length > maxLength) {
                 errors[rest.inputID] = translate('common.error.characterLimitExceedCounter', {length: formValue.length, limit: maxLength});
             }
 
             return errors;
         },
-        [maxLength, rest.inputID, translate],
+        [maxLength, rest.inputID, required, translate],
     );
 
     // 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.
@@ -93,6 +99,20 @@ function TextSelectorModal({
         }, [isVisible]),
     );
 
+    const handleSubmit = useCallback(
+        (data: FormOnyxValues<typeof ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM>) => {
+            const submittedValue = data[rest.inputID] ?? '';
+
+            if (required && !submittedValue.trim()) {
+                return;
+            }
+
+            Keyboard.dismiss();
+            onValueSelected?.(submittedValue);
+        },
+        [onValueSelected, rest.inputID, required],
+    );
+
     return (
         <Modal
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
@@ -117,10 +137,7 @@ function TextSelectorModal({
                 <FormProvider
                     formID={ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM}
                     validate={validate}
-                    onSubmit={(data) => {
-                        Keyboard.dismiss();
-                        onValueSelected?.(data[rest.inputID] ?? '');
-                    }}
+                    onSubmit={handleSubmit}
                     submitButtonText={translate('common.save')}
                     style={[styles.mh5, styles.flex1]}
                     enabledWhenOffline

src/components/TextPicker/index.tsx

@@ -8,7 +8,7 @@ import TextSelectorModal from './TextSelectorModal';
 import type {TextPickerProps} from './types';
 
 function TextPicker(
-    {value, description, placeholder = '', errorText = '', onInputChange, furtherDetails, rightLabel, disabled = false, interactive = true, ...rest}: TextPickerProps,
+    {value, description, placeholder = '', errorText = '', onInputChange, furtherDetails, rightLabel, disabled = false, interactive = true, required = false, ...rest}: TextPickerProps,
     forwardedRef: ForwardedRef<View>,
 ) {
     const styles = useThemeStyles();
@@ -54,6 +54,7 @@ function TextPicker(
                 onClose={hidePickerModal}
                 onValueSelected={updateInput}
                 disabled={disabled}
+                required={required}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...rest}
             />

src/components/TextPicker/types.ts

@@ -24,6 +24,9 @@ type TextSelectorModalProps = {
 
     /** The ID used to uniquely identify the input in a Form */
     inputID: string;
+
+    /** Whether the field is required */
+    required?: boolean;
 } & Pick<MenuItemBaseProps, 'subtitle' | 'description'> &
     TextProps;
 
@@ -48,6 +51,9 @@ type TextPickerProps = {
 
     /** The ID used to uniquely identify the input in a Form */
     inputID: string;
+
+    /** Whether the field is required */
+    required?: boolean;
 } & Pick<MenuItemBaseProps, 'rightLabel' | 'subtitle' | 'description' | 'interactive'> &
     TextProps;
 

src/pages/workspace/reportFields/CreateReportFieldsPage.tsx

@@ -149,6 +149,7 @@ function WorkspaceCreateReportFieldsPage({
                                 maxLength={CONST.WORKSPACE_REPORT_FIELD_POLICY_MAX_LENGTH}
                                 multiline={false}
                                 role={CONST.ROLE.PRESENTATION}
+                                required
                             />
                             <InputWrapper
                                 InputComponent={TypeSelector}

src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx

@@ -16,7 +16,7 @@ import {createPolicyTax, getNextTaxCode, getTaxValueWithPercentage, validateTaxN
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
-import * as PolicyUtils from '@libs/PolicyUtils';
+import {hasAccountingConnections} from '@libs/PolicyUtils';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
 import type {WithPolicyAndFullscreenLoadingProps} from '@pages/workspace/withPolicyAndFullscreenLoading';
 import withPolicyAndFullscreenLoading from '@pages/workspace/withPolicyAndFullscreenLoading';
@@ -76,7 +76,7 @@ function WorkspaceCreateTaxPage({
                 style={[styles.defaultModalContainer]}
             >
                 <FullPageNotFoundView
-                    shouldShow={PolicyUtils.hasAccountingConnections(policy)}
+                    shouldShow={hasAccountingConnections(policy)}
                     addBottomSafeAreaPadding
                 >
                     <View style={[styles.h100, styles.flex1, styles.justifyContentBetween]}>
@@ -103,6 +103,7 @@ function WorkspaceCreateTaxPage({
                                     maxLength={CONST.TAX_RATES.NAME_MAX_LENGTH}
                                     multiline={false}
                                     role={CONST.ROLE.PRESENTATION}
+                                    required
                                 />
                                 <InputWrapper
                                     InputComponent={AmountPicker}