[PAID] [$500] Keyboard focus is on the "close" button when uploading an attachment

[m-natarajan]

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: v1.4.83-0
Reproducible in staging?: y
Reproducible in production?: y
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
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1718296177557209

Action Performed:

1. Go to staging.new.expensify.com
2. Open any report and add attachment
3. Press "enter" key on keyboard

Expected Result:

Keyboard focus on "Send" button and image sent

Actual Result:

Keyboard focus on cancel button and pressing "enter" on keyboard cancels the upload

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

Recording.211.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ab436ac7382c9793
• Upwork Job ID: 1802770011901307524
• Last Price Increase: 2024-07-08
• Automatic offers:
• rojiphil | Reviewer | 103095843
• suneox | Contributor | 103095845

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

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

[tsa321]

Cannot reproduce in production release.
offending PR: #39520

[tsa321]

Proposal

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

Keyboard focus is on the "close" button when uploading an attachment

What is the root cause of that problem?

We introduce focusTrap in #39520
But in react-native-modal we already have focusTrap:

https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js

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

We can remove the new focusTrap and use react native web focusTrap in baseModal which is already there. So we only need to remove FocusTrapForModal:

App/src/components/Modal/BaseModal.tsx

Line 256 in e306af7

<FocusTrapForModal active={isVisible}>

Another alternative solution is to include the attachment screen in:

include the coresponding attachment modal screen in SCREENS_WITH_AUTOFOCUS.

App/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts

Line 4 in 2a641d9

const SCREENS_WITH_AUTOFOCUS: string[] = [

[melvin-bot]

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

[melvin-bot]

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

[CortneyOfstad]

I was able to recreate so going to get some eyes on this. @rojiphil we have a proposal here for review when you have a chance!

[melvin-bot]

@CortneyOfstad Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[CortneyOfstad]

@rojiphil can you provide feedback on the proposal here by EOD please? Thanks!

[melvin-bot]

@rojiphil, @CortneyOfstad Whoops! This issue is 2 days overdue. Let's get this updated quick!

[rojiphil]

Based on the OP test steps, I am unable to launch the Attachment modal on press of Enter key. Maybe I am missing something here.
@tsa321 Are you able to reproduce the problem on the latest main? If so, please share a video as well.

[tsa321]

@rojiphil I cannot reproduce it anymore, but I found another bug because of the new focusTrap in baseModal:

Send an attachment -> edit a report action (keep the focus in compose edit) -> open the attachment -> press back browser back button. Notice the edit composer isn't highlighted.

macos-web-d.mp4

Maybe there are another bugs too. So my suggestion is, since baseModal (react-native-modal) already has focusTrap in it:

https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/Modal/ModalFocusTrap.js

We could remove the new focusTrap in baseModal.

[rojiphil]

I cannot reproduce it anymore, but I found another bug because of the new focusTrap in baseModal:

@tsa321 As the raised issue is completely different, it is best to raise it separately and go through the normal assignment process. You can raise this in the expensify-open-source channel.

[rojiphil]

@CortneyOfstad I think we can close this issue as it is not reproduceable

[CortneyOfstad]

Sounds good — thanks @rojiphil! I was not able to reproduce again either!

[mallenexpensify]

This is still happening on staging and production.

• open chat
• paste in an image
• tap enter/return.

Expected behavior - image uploads

Actual behaviour - nothing happens, you have to navigate to the send button and click.

@CortneyOfstad , if you're unable to reproduce, please swap assignments with me. Thx

[melvin-bot]

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

[melvin-bot]

@rojiphil, @CortneyOfstad Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[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 9.0.11-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• focus trap modal config initial focus #45366

If no regressions arise, payment will be issued on 2024-08-01. 🎊

For reference, here are some details about the assignees on this issue:

• @rojiphil requires payment automatic offer (Reviewer)
• @suneox requires payment automatic offer (Contributor)

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

• [@rojiphil / @suneox] The PR that introduced the bug has been identified. Link to the PR:
• [@rojiphil / @suneox] 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:
• [@rojiphil / @suneox] 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:
• [@rojiphil / @suneox] Determine if we should create a regression test for this bug.
• [@rojiphil / @suneox] 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.
• [@CortneyOfstad] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

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

[CortneyOfstad]

@rojiphil / @suneox please complete the checklist as soon as you can so there is no delay in payment being issued! Thanks!

@strepanier03 I am heading OoO so reassigning so there is no delay in issuing the payment tomorrow. Thank you!

[suneox]

@rojiphil Could you please complete the checklist since you’re the reviewer for this issue?

[strepanier03]

I'll check tomorrow for the checklist. I'm heading out soon.

[rojiphil]

• [@rojiphil] The PR that introduced the bug has been identified. Link to the PR: Offending PR
• [@rojiphil] 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: Added comment
• [@rojiphil] 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: Not Required. Existing checklist is good enough to capture such issues.
• [@rojiphil] Determine if we should create a regression test for this bug. : Since the changes in focusTrapForModal are generic and can impact other modals, it is better to have a regression test
• [@rojiphil] 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.

Test
1 Copy image to clipboard
2 Open any report
3 Paste image to the composer input by hotkey (Ctrl+V)
4 Press 'Enter' key to send the message
5 Verify that the image is sent

[rojiphil]

@strepanier03 @CortneyOfstad
Completed BZ checklist and accepted offer.
Thanks and sorry for the delayed response.

[melvin-bot]

@rojiphil, @strepanier03, @CortneyOfstad, @suneox, @grgia Eep! 4 days overdue now. Issues have feelings too...

[strepanier03]

Both contracts are paid and closed in Upwork. Thank you all!