[HOLD for payment 2025-01-24] [$250] Report fields -System message shows undefined when list value is changed back to initial value

[IuliiaHerets]

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.0.18-1
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Submit two expenses.
4. Go to workspace settings > Report fields (enable in More features).
5. Add a list type report field, with some list values and an initial value.
6. Return to the workspace chat.
7. Go to expense report.
8. Click on the list report field.
9. Select a different list value.
10. Revisit the report.
11. Click on the list report field.
12. Click on the already selected value (so that it will change to the initial value).
13. Revisit the report.

Expected Result:

The system message will not contain "undefined".

Actual Result:

The system message contains "undefined" when the list value is changed back to the initial value.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6565437_1723109214472.20240808_172103.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~014a67065c97e4bdba
• Upwork Job ID: 1822942704704377446
• Last Price Increase: 2024-08-19
• Automatic offers:
• dukenv0307 | Reviewer | 103641179
• nkdengineer | Contributor | 103641182
• etCoderDysto | Contributor | 105612296

Issue Owner

Current Issue Owner: @dukenv0307

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (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.

[IuliiaHerets]

We think that this bug might be related to #wave-control

[IuliiaHerets]

@bfitzexpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[etCoderDysto]

Edited by proposal-police: This proposal was edited at 2024-08-08 13:17:27 UTC.

Proposal

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

System message shows undefined when list value is changed back to initial value

What is the root cause of that problem?

When selecting the same value (fieldValue === option.text), we assign empty string to fieldKey and pass it to the submit function

App/src/pages/EditReportFieldDropdown.tsx

Line 111 in 9c7c4a1

onSelectRow={(option) => onSubmit({[fieldKey]: !option?.text || fieldValue === option.text ? '' : option.text})}

Then when value is an empty string we assign null to value prop, update the BE with with a new reportField that has null as a value

App/src/pages/EditReportFieldPage.tsx

Lines 76 to 82 in 9c7c4a1

	const handleReportFieldChange = (form: FormOnyxValues<typeof ONYXKEYS.FORMS.REPORT_FIELDS_EDIT_FORM>) => {
	const value = form[fieldKey];
	if (isReportFieldTitle) {
	ReportActions.updateReportName(report.reportID, value, report.reportName ?? '');
	Navigation.goBack();
	} else {
	ReportActions.updateReportField(report.reportID, {...reportField, value: value === '' ? null : value}, reportField);

Then BE returns a report action object that have null on originalMessage.newValue prop

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

We should remove

|| fieldValue === option.text

from

App/src/pages/EditReportFieldDropdown.tsx

Line 111 in 9c7c4a1

onSelectRow={(option) => onSubmit({[fieldKey]: !option?.text || fieldValue === option.text ? '' : option.text})}

Or we should change it to

 onSelectRow={(option) => onSubmit({[fieldKey]: option?.text  ??  '' })}

What alternative solutions did you explore? (Optional)

We can dismiss the modal when value is an empty string

if (value) {
ReportActions.updateReportField(report.reportID, {...reportField, value}, reportField);
            }
Navigation.dismissModal(report?.reportID);

[nkdengineer]

Edited by proposal-police: This proposal was edited at 2024-08-08 13:11:00 UTC.

Proposal

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

The system message contains "undefined" when the list value is changed back to the initial value.

What is the root cause of that problem?

If the selected value is the current value of the report field, we pass it as empty string here

App/src/pages/EditReportFieldDropdown.tsx

Line 111 in 4f45424

onSelectRow={(option) => onSubmit({[fieldKey]: !option?.text || fieldValue === option.text ? '' : option.text})}

Then here we pass the new value of the report field as null

App/src/pages/EditReportFieldPage.tsx

Line 82 in 4f45424

ReportActions.updateReportField(report.reportID, {...reportField, value: value === '' ? null : value}, reportField);

So BE returns the new value in report action as null. Then when merging data to Onyx, the newValue field is deleted since it has null value.

It leads newValue being undefined when we get the message here

App/src/libs/ReportActionsUtils.ts

Line 1223 in 4f45424

return Localize.translateLocal('report.actions.type.changeField', {oldValue, newValue, fieldName});

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

We should add another case when the new value doesn't exist to display a message like remove the ${fieldName} (previously "${oldValue}"). We also need to create a new translation key for this message

if (!newValue) {
    return // translated message;
}

App/src/libs/ReportActionsUtils.ts

Line 1220 in 4f45424

if (!oldValue) {

What alternative solutions did you explore? (Optional)

We can do nothing if the user select the selected value

onSelectRow={(option) => {
    if (fieldValue === option.text || !option?.text) {
        return;
    }
    onSubmit({[fieldKey]: option.text})
}} 

App/src/pages/EditReportFieldDropdown.tsx

Lines 111 to 112 in 4f45424

	onSelectRow={(option) => onSubmit({[fieldKey]: !option?.text || fieldValue === option.text ? '' : option.text})}
	initiallyFocusedOptionKey={selectedOptionKey ?? undefined}

[nkdengineer]

Updated proposal

• Detail the RCA

[etCoderDysto]

Updated proposal

• Added an alternative solution

[melvin-bot]

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