[HOLD for payment 2024-07-10] Composer is not highlighted when focused after enabling toggle and clicking + button

[izarutskaya]

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.83-1
Reproducible in staging?: Y
Reproducible in production?: N
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to any chat.
3. Focus on the composer.
4. Note that the composer is higlighted when it is in focus.
5. Go to Account settings > Troubleshoot.
6. Enable any toggle from Troubleshoot.
7. Return to chat.
8. Note that the composer is still in focus.
9. Click composer + button.
10. Click on the composer.
11. Note that the composer is not highlighted when it is in focus.
12. Copy paste any content in the composer while it is focused and not highlighted.
13. Note that the cursor appears before the text after pasting it.

Expected Result:

The composer should be highlighted when it is in focus at all time.

Actual Result:

In Step 11, the composer is not focused after switching on the toggle from Troubleshoot, clicking composer + button and refocusing on the composer.
Text cursor is not positioning properly after pasting content when the composer is in this state (Step 13).

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

Bug6512691_1718341033239.20240614_125639.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @isabelastisser / @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.

[melvin-bot]

Triggered auto assignment to @puneetlath (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[izarutskaya]

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

[izarutskaya]

We think this issue might be related to the #vip-vsb

[izarutskaya]

Production

bandicam.2024-06-14.14-04-05-563.mp4

[mountiny]

I dont think this has to be a blocker since its just about the highlight colour. But seems to be regression from @jnowakow @adamgrzybowski

[jnowakow]

@mountiny I'll take a look at this. I have other issue assigned to me so I'll probably pass one of this two to other dev at Software Mansion if it occurs I'm not able to solve them quickly

[jnowakow]

I found the root case of this problem. If you open TroubleshootPage and then go back to report screen for some reason TrobleshootPage is still in React tree. TroubleshootPage has the renders the FocusTrap. Its FocusTrap is paused when navigating back to ReportScreen. When the AttachementModal is open another FocusTrap is rendered. It shares the stack with FocusTrap from TroubleshootPage and when dismissed activates its FocusTrap which is not visible to the user. It breaks focus on the whole page.

[tsa321]

@jnowakow the highlight of composer also breaks opening popover (Fab button, right click on report action, right click on LHN, three dots menu,..) then click inside composer.

[jnowakow]

@tsa321 I'm checking this out

[jnowakow]

@tsa321 problem fixed

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

• Do not trap focus on troubleshoot and save the world pages #43832

If no regressions arise, payment will be issued on 2024-07-10. 🎊

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

• @jnowakow does not require payment (Contractor)

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

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

[puneetlath]

@aimane-chnaif was the C+ here.

[isabelastisser]

@aimane-chnaif, please complete the checklist above. Thanks!

[aimane-chnaif]

Offending PR is #39520 which was quite big, so hard to catch this kind of bugs.
This was minor visual bug and QA team caught this on staging so no need regression test.

[isabelastisser]

@aimane-chnaif / C+ review / $250 PENDING PAYMENT IN ND
@jnowakow / contributor / no payment required (contractor).