[HOLD for payment 2023-06-21] [$1000] Web - Attachment - The attachments carousel repeats the same image if press the Next key after clicking on any attachment

[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!

---

Action Performed:

1. Open App
2. Go to any Chat and send a few attachments (images, videos)
3. Press on any attachments, and now press the Right Arrow key from the keyboard. It will load the next attachment.
4. Now Press the Arrow left key from the keyboard to load the previous attachment.
5. Now click on anywhere on the attachment
6. Now Press either the Left Arrow or Right Arrow key again

Expected Result:

It should load the next attachment in the carousel

Actual Result:

It will load the same and the same attachment again

Workaround:

Unknown

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: 1.3.17.0

Reproducible in staging?: yes

Reproducible in production?: yes

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

Recording.2797.mp4

carousel-loads-same-image-again-again.1.mov

Expensify/Expensify Issue URL:

Issue reported by: @jayeshmangwani

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1684419981493959?thread_ts=1684419948.108039&cid=C049HHMV9SM

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011bb3ee21de3f842b
• Upwork Job ID: 1661231781339181056
• Last Price Increase: 2023-05-31

[melvin-bot]

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

[melvin-bot]

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

[kadiealexander]

Reproduced!

2023-05-24_16-42-36.mp4

Observed the same experience on the desktop app.

[melvin-bot]

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

[melvin-bot]

Current assignee @kadiealexander is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[akinwale]

The videos included do not match the issue description.

[bhrvarsani22]

The video and Upwork requirement does not match.

[melvin-bot]

📣 @bhrvarsani22! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[bhrvarsani22]

Contributor details
Your Expensify account email: bhargesh.infoguru@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~014aa84acf8e86d3f6

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[bhrvarsani22]

The video and Upwork requirement does not match.

[tienifr]

Proposal

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

It will load the same and the same attachment again when we zoom an attachment and click ArrowLeft

What is the root cause of that problem?

The root cause is that we have AttachmentCarousel as a horizontal FlatList here

App/src/components/AttachmentCarousel/index.js

Line 340 in d70b746

<FlatList

, when we focus on the list element (by clicking on it to zoom) and press ArrowLeft, by default the behavior of the horizontal list will be to scroll to the left, which will cycle to the last element (before the first element).

We already have our own 'ArrowLeft' event listener here https://github.com/Expensify/App/blob/e9f6a373e70a75d49dda333233ff952ea65e7cb3/src/components/AttachmentCarousel/CarouselActions/index.js#LL19C3-L19C3 which will not cycle to the last element if currently we're on the first element.

But it will still scroll due to default list behavior.

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

We need to add e.preventDefault here

App/src/components/AttachmentCarousel/CarouselActions/index.js

Line 20 in e9f6a37

props.onCycleThroughAttachments(-1);

and here

App/src/components/AttachmentCarousel/CarouselActions/index.js

Line 23 in e9f6a37

props.onCycleThroughAttachments(1);

so that the list will follow our custom ArrowLeft and ArrowRight behavior rather than using the default behavior.

What alternative solutions did you explore? (Optional)

NA

[kadiealexander]

@bhrvarsani22 and @akinwale, the videos in the OP have been updated, please take another look.

[bhrvarsani22]

Checking...

[kadiealexander]

@aimane-chnaif any thoughts on the proposal here? #19484 (comment)

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[situchan]

Proposal

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

The attachments carousel repeats the same image if press the Prev/Next key after focusing on it

What is the root cause of that problem?

The default behavior of FlatList is applied. As scroll is horizontal, arrow left/right controls scroll position as default.

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

We can fully deprecate current /CarouselActions/index.js (document event listener) and use native code in /CarouselActions/index.native.js (our own keyboard shortcut handler) which already prevents default behavior (8th param in subscribe function - default value is true)

[aimane-chnaif]

Thanks for proposals.

Both @tienifr and @situchan explained the root cause correctly and provided working solution.
@tienifr proposed first but I like consistent code between web and native which is @situchan's solution.
Our keyboard shortcut handler is using react-native-key-command library which is already responsive to all platforms perfectly.

I will let @thienlnam decide who to assign. Anyway I will request web code deprecation in PR whoever assigned.
🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @kadiealexander is eligible for the Bug assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

Current assignee @aimane-chnaif is eligible for the External assigner, not assigning anyone new.

[kadiealexander]

@sakluger I'm going OOO so I'm reassigning this for payment. I've sent offers to @aimane-chnaif and @situchan, but I couldn't proactively find @jayeshmangwani on Upwork. You can find them all here. Thanks for your help!!

@jayeshmangwani please apply on Upwork so we can issue your reporting bonus: upwork.com/jobs/~011bb3ee21de3f842b

[jayeshmangwani]

@kadiealexander applied on Upwork

[sakluger]

• @jayeshmangwani thanks for applying, I sent you a contract through Upwork.
• @situchan I sent you payment with bonus.
• @aimane-chnaif could you please complete the BZ checklist? Thanks!

[aimane-chnaif]

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:

• [@aimane-chnaif] The PR that introduced the bug has been identified. Link to the PR: Attachment Carousel Virtual Caching #16973
• [@aimane-chnaif] 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: https://github.com/Expensify/App/pull/16973/files#r1237362088
• [@aimane-chnaif] 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: This came from big refactor of attachment carousel and this case was easily missed. I think commenting on offending PR is enough.
• [@aimane-chnaif] Determine if we should create a regression test for this bug.
• [@aimane-chnaif] 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.

Regression Test Proposal

1. Go to any chat room
2. Send multiple images
3. Click any image to open preview modal
4. Click anywhere on the attachment
5. Press the Left/Right Arrow key many times
6. Verify that it loads prev/next attachments correctly

[sakluger]

Thanks! Those proposed steps look good to me. 👍

All paid up, ready to close!

[jayeshmangwani]

@sakluger Can you please release Milestone at Upwork its showing In Progress to me