[Due for payment 2025-05-05] [$250] Workspace - No error on report field Name tab

[vincdargento]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.1.23-4
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): -
Issue reported by: Applause Internal Team
Device used: MacOS Catalina 11.7.10
App Component: Workspace Settings

Action Performed:

Precondition: workspace with enabled Report field or Taxes feature.

1. Go to ws > Report fields
2. Click Add field
3. Click Name
4. Click Save without entering name

Expected Result:

User stays on the Name tab. Expect to see an error 'Please enter a report field name '

Actual Result:

User is navigated to previous tab, Add field. An error 'Please enter a report field name ' appears on this tab.

NOTE: the same behavior with a Tax rate name (Tax tab).

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021908219416911535780
• Upwork Job ID: 1908219416911535780
• Last Price Increase: 2025-04-11
• Automatic offers:
• ikevin127 | Contributor | 106910179

Issue Owner

Current Issue Owner: @maddylewis

[melvin-bot]

Triggered auto assignment to @maddylewis (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[hoangzinh]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-04 14:51:04 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Workspace - No error on report field Name tab

What is the root cause of that problem?

In TextSelectorModal, we only validate maxLength by default, we haven't validated other things

App/src/components/TextPicker/TextSelectorModal.tsx

Lines 51 to 63 in fe5c361

	const validate = useCallback(
	(values: FormOnyxValues<typeof ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM>) => {
	const errors: FormInputErrors<typeof ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM> = {};
	const formValue = 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],
	);

What changes do you think we should make in order to solve the problem?

Let's extend the availability of validation in TextSelectorModal above by passing a custom validation outside. Then use it inside the existing validation method of TextSelectorModal. That means:

1. We will inject custom validation that will validate min length here
2. Then pass that prop down to TextSelectorModal

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add unit tests for TextSelectorModal with custom validation injection

What alternative solutions did you explore? (Optional)

Instead of a custom validation method, we can introduce a new prop, like "allowBlank" to TextSelectorModal, then validate that text is required if it's false.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021908219416911535780

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[ikevin127]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-04 21:33:34 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue

Workspace - No required field error is shown on Report Field > Name input screen.

What is the root cause of that problem?

The TextSelectorModal which is the used in CreateReportFieldsPage (through TextPicker) only has max characters length validation within the component, it's missing min characters length / field is required validation logic.

What changes do you think we should make in order to solve the problem?

In order to have things work as expected, on top of passing down a custom validation function (like we do in other components e.g using customValidate prop), we also need to add some custom logic to prevent text edit modal from closing when pressing Save when the newly added custom validation doesn't pass.

Here are the required changes:

1. In CreateReportFieldsPage create a new custom validate function:

    const validateNameMinLength = useCallback(
        (value: string): string | null => {
            if (!value || value.trim().length < 1) {
                return translate('workspace.reportFields.reportFieldNameRequiredError');
            }
            return null;
        },
        [translate],
    );

Note: When it comes to the error copy we can use common alternative This field is required. instead of Please enter a report field name if preferred.

2. Below in CreateReportFieldsPage pass the new custom validate function to the INPUT_IDS.NAME InputWrapper through new prop customValidate:

    customValidate={validateNameMinLength}

3. Drill the customValidate prop down through TextPicker component and down to TextSelectorModal, making sure to pass the new prop type in TextPicker for both TextPickerProps and TextSelectorModalProps.
4. In TextSelectorModal add the following changes:

• expose new customValidate prop
• below, in the validate function under the maxLength validation add the following custom validation block:

if (customValidate && formValue !== undefined) {
    const customError = customValidate(formValue);
    if (customError) {
        errors[rest.inputID] = customError;
    }
}

• pass customValidate dependency to the updated validate function dependency array

Important step not covered in other proposals

• from below in component render, move the inline FormProvider onSubmit function outside of component render and add the custom validation logic to prevent modal dismissal when pressing Save if the validation is not passing:

const handleSubmit = useCallback(
    (data: FormOnyxValues<typeof ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM>) => {
        const submittedValue = data[rest.inputID] ?? '';
        
        if (customValidate) {
            const customError = customValidate(submittedValue);
            if (customError) {
                return;
            }
        }

        Keyboard.dismiss();
        onValueSelected?.(submittedValue);
    },
    [customValidate, onValueSelected, rest.inputID],
);

• pass the new handleSubmit function below to the FormProvider onSubmit

Here's the complete solution test branch: ikevin127-reportFieldsNameValidation.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

We usually don't unit test min/max length form validation logic, but if required here for some reason, we can do that.

🟢 What alternative solutions did you explore? (Optional)

We can leverage getFieldRequiredErrors like we do in other parts of the app and simply pass required to the field in CreateReportFieldsPage, drill the required down to TextSelectorModal and apply the following changes in the validate function:

import {getFieldRequiredErrors} from '@libs/ValidationUtils';
//...
let errors: FormInputErrors<typeof ONYXKEYS.FORMS.TEXT_PICKER_MODAL_FORM> = {};

if (required) {
    errors = getFieldRequiredErrors(values, [rest.inputID]);
}

• make sure to add required to validate function dependency array.

and in the handleSubmit function referenced in the main solution add this logic instead:

if (required && !submittedValue.trim()) {
    return;
}

• make sure to add required to handleSubmit function dependency array.

The other details remain the same as detailed in the main solution, except that we replaced the customValidate prop with required so we won't have to add custom logic when we already have it.

Here's the complete solution test branch: ikevin127-reportFieldsNameValidationAlt.

Result

MacOS: Chrome (main solution)

web.mov

MacOS: Chrome (alternative solution)

web-alt.mov

[ikevin127]

Updated proposal

• added a better solution (alternative)

[melvin-bot]

@rojiphil Whoops! This issue is 2 days overdue. Let's get this updated quick!