[HOLD for payment 2023-06-13] [HOLD for payment 2023-06-08] [$1000] Clicking on an attachment opens wrong image

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Have 2 attachments in the concierge chat. (Uber ride image then Flight details image)
2. Open the latest attachment (flight details)

Expected Result:

Should open the correct image

Actual Result:

Instead of opening the last image opens the previous one.

NOTE: It only happens in the concierge chat, and only on mobile. But killing the app and reopening it doesn't fix it. Additionally, I've received new images and they don't work either.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number:
Reproducible in staging?: needs reproduction
Reproducible in production?: Needs reproduction
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1682642592064539

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017ebe929096afd053
• Upwork Job ID: 1656211658447282176
• Last Price Increase: 2023-05-17

[MelvinBot]

Triggered auto assignment to @zanyrenney (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[zanyrenney]

checking in slack what the best next steps are here as I can't reproduce this but maybe worth exploring internally from the slack thread.

[zanyrenney]

This is able to be reproduced in Incognito by @quinthar but neither me nor @kavimuru have been able to reproduce.

[zanyrenney]

Additional data points from the bug report:

HTML:
"<p>Yes - it's at the bottom of the confirmation PDF!<br /><img src=\"https://s3-us-west-1.amazonaws.com/concierge-responses-expensify-com/uploads%2F1682657370975-1682657370975.png\" style=\"width:300px;\" class=\"fr-fic fr-dib\" alt=\"uploads%2F1682657370975-1682657370975.png\" /></p>"

[zanyrenney]

This has been able to be reproduced https://expensify.slack.com/archives/C049HHMV9SM/p1683331741796129?thread_ts=1682642592.064539&cid=C049HHMV9SM

[zanyrenney]

images-preview-incorrect.mp4

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @arielgreen (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @hayata-suenaga (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[arielgreen]

Unassigning, not sure why it added two BZ assignees.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.24-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix: Don't try to infer file name in Attachment Carousel #20141
• Fix bug in global modal state management during unmounting #19744

If no regressions arise, payment will be issued on 2023-06-13. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@eVoloshchak] The PR that introduced the bug has been identified. Link to the PR:
• [@eVoloshchak] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@eVoloshchak] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@eVoloshchak] Determine if we should create a regression test for this bug.
• [@eVoloshchak] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@bfitzexpensify / @zanyrenney] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[kidroca]

We've successfully addressed two bugs related to incorrect attachment display. However, one more issue remains (affects only web), related to the modal focus trap, which causes the first item to scroll into view. This issue has been previously described in detail here.

This bug is consistently replicable on mWeb Safari, demonstrating behavior similar to the video shared in this comment.

The underlying cause appears to be tied to the modal focus trap logic from react-native-web, which gets triggered or re-triggered as soon as a thumbnail is selected to launch the attachment view.

I'm currently investigating what exactly triggers this focus trap, which results in the first attachment in the list being focused instead of the selected one.

[hayata-suenaga]

@kidroca thank you for your ongoing investigation 🙇

[zanyrenney]

Still held for payment for the 13th.

[Natnael-Guchima]

Hello @zanyrenney, According to this #18182 (comment) the bug that has been fixed here has the same root cause as a bug report I reported earlier. Am I eligible for the bug reporting bonus?

Thanks.

[zanyrenney]

We're discussing the internally and will get back to you shortly. For EEs thread is here

[zanyrenney]

Cool, so the payments will be as following:

Reporting bonus: @Natnael-Guchima
Contributor: @kidroca (paid outside Upwork by contract)
Contributor+ @eVoloshchak

[zanyrenney]

Please accept invites for payout.

[Natnael-Guchima]

Please accept invites for payout.

Accepted the offer. Thanks.

[zanyrenney]

https://www.upwork.com/jobs/~019ad885bd5005ca81

[zanyrenney]

@Natnael-Guchima @eVoloshchak paid out on Upwork!

[zanyrenney]

I'm not going to close this one out yet as @kidroca mentions there is one bug:

one more issue remains (affects only web), related to the modal focus trap, which causes the first item to scroll into view. This issue has been previously described in detail #18150 (comment).

@kidroca can you let me know when that's resolved so that we can close this GH issue out please?

[Natnael-Guchima]

@Natnael-Guchima @eVoloshchak paid out on Upwork!

Thanks.

[bfitzexpensify]

@kidroca bump on the question in #18150 (comment) - do we need to open another issue to handle that problem?

[kidroca]

It may be beneficial to initiate a new ticket for a follow-up and bring closure to the current one. However, before we proceed, we should clarify a few points:

• Have we received any recent reports regarding incorrect image display in the carousel?
• If so, is there a correlation with a specific platform?

From my end, I no longer encounter the issue of the carousel showing the wrong image during normal usage. The issue appears to be exclusive to mobile Safari on the simulator when I'm testing the app.

I've traced this problem back to the modal handling logic in react-native-web. Currently, I am working on developing a standalone bug example to highlight this issue and intend to open a separate ticket upstream.

If there are no longer reports of the carousel bug, I would propose we close this ticket. We can then initiate a new one specifically to track and monitor the mobile Safari-related issue.

[bfitzexpensify]

Thanks @kidroca. Your approach sounds good. I'm not finding any recent reports of the carousel bug, so let's go ahead and close this one out.

[kidroca]

@bfitzexpensify would you open a new ticket about the mobile Safari bug?

• I can still recreate this "Clicking on an attachment opens wrong image" bug, but only on mobile Safari
• if I'm not assigned to a ticket I can't continue my investigation

[bfitzexpensify]

Cool, opened #21177