[$500] The main composer in the request report page is focused when closing the three dot menu

[kbecciv]

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

---

Version Number: 1.3.88.1
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: @daveSeife
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697902847726839

Action Performed:

1. Go to a request report page
2. Blur the main composer.
3. Tap the three dots icon.
4. Tap outside the menu to exit. Notice that the main composer is focused.

Expected Result:

The main composer in the request report page is unfocused

Actual Result:

The main composer in the request report page is focused

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

Android: Native

Android: mWeb Chrome

XRecorder_20102023_185845.mp4

iOS: Native

iOS: mWeb Safari

T164iossafari.Focus-1.mp4

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016b32eafb37ff001e
• Upwork Job ID: 1716452642189750272
• Last Price Increase: 2023-10-30

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~016b32eafb37ff001e

[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

[melvin-bot]

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

[ishpaul777]

Problem

The main composer in the request report page is focused when closing the three dot menu in request details while not in report details

Root Cause

Based on Modal(popover visibility) we refocus the composer but in MoneyReport Header we are setting the modal visibility key. (default true unless marked false explictly https://github.com/Expensify/App/blob/1a7a5dc80c84c5ef9ad3c0dd003369d7b011eaed/src/components/ThreeDotsMenu/index.js)

ref - https://github.com/Expensify/App/blob/main/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js#L480-L497

But in HeaderView we are not setting the modal visibility so the composer do not refocus.

Changes

We should introduce a new prop for HeaderWithBackButton, like shouldSetModalVisibilityForThreeDotsMenu (true by default) and pass false in MoneyReportHeader

// src/components/MoneyReportHeader.js

           <HeaderWithBackButton
               // rest of props
                shouldSetModalVisibilityForThreeDotMenu={false}
            >

// src/components/HeaderWithBackButton/index.js
                      <ThreeDotsMenu
                            menuItems={threeDotsMenuItems}
                            onIconPress={onThreeDotsButtonPress}
                            anchorPosition={threeDotsAnchorPosition}
                            shouldOverlay={shouldOverlay}
                            shouldSetModalVisibility={shouldSetModalVisibilityForThreeDotMenu}
                        />

[ntdiary]

To be honest, I don't think continuing to patch the existing refocus logic is a promising approach.

We are doing the upgrade to RNW 0.19, after which I will try to improve the POC in issue #24452 and clean up these related codes. So I think we just need to track this case under issue #15992 for now.

cc @kbecciv, @abekkala

[melvin-bot]

@ntdiary, @abekkala Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

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

[abekkala]

on hold - this gh has been referenced in the tracking issue

[melvin-bot]

@ntdiary, @abekkala Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@ntdiary, @abekkala Still overdue 6 days?! Let's take care of this!

[ntdiary]

melvin, not overdue.

[abekkala]

not overdue, on hold

[abekkala]

still on hold

[abekkala]

still on hold

[melvin-bot]

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

[abekkala]

#15992 is still on hold

[melvin-bot]

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

[abekkala]

still on hold

[abekkala]

still on hold

[abekkala]

@kbecciv can you recreate this and provide an updated video?

[kbecciv]

Not reproduced on build 1.4.38.0

Screen_Recording_20240207_144059_Chrome.mp4