[$250] [HOLD for payment 2024-04-05] Workspace - One of the dropdown options configured in OD is missing from ND

[kbecciv]

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: 1.4.56.0
Reproducible in staging?: y
Reproducible in production?: new feature
Issue reported by:

Action Performed:

1. Log into OD with a new expensifail account
2. OD: Create a Collect workspace with chat enabled
3. OD: Navigate to Workspace settings - Reports - Report and Invoice Fields
4. OD: Add a dropdown field with any name and "Expense Report" type
5. OD: Add 3 options under the dropdown "1" "2" and "3"
6. OD: Set "1" as the initial value
7. OD: Invite a new expensifail account to the workspace as member
8. ND: Log in as the member
9. ND: Create a manual IOU in the workspace chat
10. ND: Open the IOU

Expected Result:

All options should be visible.

Actual Result:

One of the dropdown option configured in OD is missing from ND. In this instance, it's "2".

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

bandicam.2024-03-24.00-09-12-512.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @kevinksullivan

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01286e42f8805eb5ba
• Upwork Job ID: 1778519670656045056
• Last Price Increase: 2024-04-11

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @aldo-expensify (Engineering), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[kbecciv]

We think that this bug might be related to #wave-collect - Release 1

[allgandalf]

Proposal

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

One of the dropdown options configured in OD is missing from ND

What is the root cause of that problem?

We send wrong information to the component in the prop fieldOptions.

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

We must send all the value reportField.values to the component and the EditReportFieldDropdownPage component already has the filtering logic.
We can also apply some filtering if needed in EditReportFieldDropdownPage itself

Note

In my opinion we should disable the search functionality for dropdown if the list is less than 8 in length, this is consistent with categories and tags

Result

[ahmedGaber93]

Proposal

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

Workspace - One of the dropdown options configured in OD is missing from ND

What is the root cause of that problem?

here when we filtering disabledOptions we use this logic !(value in reportField.disabledOptions))

App/src/pages/EditReportFieldPage.tsx

Line 109 in 00e0121

fieldOptions={reportField.values.filter((value) => !(value in reportField.disabledOptions))}

and this the value of values and disabledOptions

values = ["1","2","3"];
disabledOptions = [false, false, false];

this logic is incorrect, because the keyword in search for the index number in the array not for the value(also if it search for the value it incorrect because disabledOptions is bollean[] not string[]).
for example

console.log("1" in ["1"]) // return false because index 1 not found
console.log("0" in ["1"]) // return true because index 0 found

so ["1","2","3"].filter((value) => !(value in [false, false, false])); will return ["3"]

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

we need to change the filter logic to be

reportField.values.filter((_, i) => !reportField.disabledOptions[i])
// or
reportField.values.filter((_, i) => i in reportField.disabledOptions && !reportField.disabledOptions[i])

What alternative solutions did you explore? (Optional)

we can edit disabledOptions in the backend to be string[] and use value and includes to filtering it

[allgandalf]

Note

In my proposal, i mentioned that we should pass the whole dropdown list to the component, and filters like checking for disabled, turning the search bar off if the length is less that 8 is because, there is a case where we might have selected an option which we later disable, if we filter the values at the Component step itself, then we would not be able to display the disabled but selected option in the edit dropdown page, as we never got that value in the component in the first place>

Also this behavior is consistent with the tags and category list as well, we pass all the values to the component and then filter them accordingly

[aldo-expensify]

I think @ahmedGaber93 is right about the problem being the usage of the in operator here. Testing...

[aldo-expensify]

hmm I don't think we necessarily have to be consistent with the CategoryPicker, that seems to be dealing with many specific things related to categories and is more complex. I think it is fine for the design of EditReportFieldDropdownPage to expect that it should show all values passed in fieldOptions

[allgandalf]

As i said the edge case here where we had selected a dropdown option but later we disable it, then in the list we won't be able to show that disabled option as now we don't pass it to the component, this is again a regression as now we will not be able to deselect that disabled option :)