[HOLD for payment 2024-06-28] [$250] Expense report - Delete modal does not disappear immediately after deleting report field

[lanitochka17]

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.81-5
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Issue found when executing PR #43041

Action Performed:

precondition: user is a member of a collect workspace

1. Go to OD as a workspace admin
2. Add some text reports fields
3. As a member of the workspace, open the ND app
4. Open the workspace chat
5. Submit some expense
6. As admin delete any report field in OD
7. Open the expense report in ND app as a member
8. Select the deleted report field and deleted

Expected Result:

The delete modal disappears immediately before the user is returned to the report

Actual Result:

The delete modal does not disappear immediately, it is still displayed a little after user is returned to the report

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

Bug6509499_1718118652305.video_2024-06-10_16-45-45__1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b3ed03d5140d382f
• Upwork Job ID: 1800593700265731860
• Last Price Increase: 2024-06-11
• Automatic offers:
• truph01 | Contributor | 102768696

Issue Owner

Current Issue Owner: @isabelastisser

[melvin-bot]

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

[lanitochka17]

@isabelastisser 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

[lanitochka17]

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

[melvin-bot]

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

[melvin-bot]

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

[TheGithubDev]

Proposal

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

The delete modal does not disappear immediately after deleting a report field in the expense report. It remains visible for a short time even after the user is returned to the report.

What is the root cause of that problem?

The root cause of this issue is a delay or mismanagement in the state updates or the modal dismissal logic. The delay could be due to asynchronous operations not being handled properly or the modal's visibility state not being updated in a timely manner.

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

To solve this problem, we need to ensure that the modal is dismissed immediately after the delete action is confirmed. This can be achieved by:

1. Ensuring Proper State Update:

• Make sure that the state controlling the modal's visibility is updated immediately upon the delete action.

2. Synchronous Dismissal Logic:

• Ensure that the modal dismissal logic runs synchronously and is triggered right after the deletion confirmation.

Example of changes:

1. Update the State Immediately:

• Ensure that the state managing the modal visibility is set to false right after the delete action.

  const handleDelete = () => {
      // Perform delete operation
      deleteReportField()
          .then(() => {
              // Dismiss the modal immediately after the delete operation
              setIsModalVisible(false);
              // Navigate back to the report
              navigation.goBack();
          })
          .catch(error => {
              // Handle error
              console.error("Error deleting report field:", error);
          });
  };

3. Ensure Synchronous Dismissal:

• Ensure that the modal dismissal happens synchronously.

  const handleDelete = async () => {
      try {
          // Perform delete operation
          await deleteReportField();
          // Dismiss the modal immediately
          setIsModalVisible(false);
          // Navigate back to the report
          navigation.goBack();
      } catch (error) {
          // Handle error
          console.error("Error deleting report field:", error);
      }
  };

Alternative solutions ?

1. Debouncing the Modal Dismissal:

• Consider adding a short debounce delay to the modal dismissal logic to ensure smooth UI transitions without noticeable lag.

2. Optimistic UI Updates:

• Implement optimistic UI updates where the modal is dismissed immediately on the UI while the delete operation is performed in the background.

3. Separate Loading Indicator:

• Use a separate loading indicator for the delete operation while dismissing the modal immediately, providing clear feedback to the user.

Please note that the above explanation outlines only the technical approach I plan to take. After my proposal gets accepted, I will submit the finalized solution, as mentioned.

Thanks!