Workspace - Blue focus is shown when changing workspace name

[lanitochka17]

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.4.2-0
Reproducible in staging?: Y
Reproducible in production?: N
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to settings
2. Workspace
3. Go to an existing workspace or create one
4. Click on the workspace name to go to the settings. (Don't go to the settings by clicking on 'Settings')
5. Change the name and Click the Enter Key on the Key Board to Save. (Don't click on the 'save' button to save.)

Expected Result:

The name changes and no Blue focus is shown on the Workspace Name

Actual Result:

The name changes and Blue focus is shown on the Workspace Name

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

Bug6286965_1700650339036.test9_BlueFocus.mp4

View all open jobs on GitHub

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

[melvin-bot]

Triggered auto assignment to @arosiclair (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

📣 @github-actions[bot]! 📣
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. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[lanitochka17]

Production:

Recording.518.mp4

[dukenv0307]

Proposal

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

Workspace - Blue focus is shown when changing workspace name

What is the root cause of that problem?

We added a focus trap in this PR #27670 which makes the focus after we submit a form with enter key

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

In WorkspaceInitalPage, we should add shouldDisableFocusTrap as false into ScreenWrapper. We should also add this prop to other pages which can navigate to a page that contains a form.

App/src/pages/workspace/WorkspaceInitialPage.js

Line 236 in b30b555

<ScreenWrapper

What alternative solutions did you explore? (Optional)

We can change shouldDisableFocusTrap to shouldEnableFocusTrap since almost all pages shouldn't enable focus trap
and update this condition to isEnabled={shouldEnableFocusTrap}

App/src/components/ScreenWrapper/index.js

Line 155 in b30b555

isEnabled={!shouldDisableFocusTrap}

[arosiclair]

Thanks @dukenv0307 you're alternative solution makes sense to me but I'm not very familiar and could use a second opinion from those on that focus trap PR.

@kosmydel @blazejkustra @roryabraham what do you guys think? Does it make sense to disable this focus trap by default?

[luacmartins]

I think the option above makes sense. @dukenv0307 are you available to work on a PR to fix all instances of this bug?

[dukenv0307]

@luacmartins Sure, I'm available.

[dukenv0307]

@luacmartins Please assign me so I can raise a PR.

[luacmartins]

Actually, we'll just revert the original PR since it introduced other blockers.

[dukenv0307]

@luacmartins I think this blocker doesn't come from #27670

[luacmartins]

The issue is resolved when I revert that PR

[dukenv0307]

I think this bug is about the behavior of the date picker or form provider. I have tried to test another date picker in DateOfBirth page in production and has the same bug. This video is the result that I tested in production.

Screen.Recording.2023-11-23.at.03.06.57.mov

[arosiclair]

Agree with reverting the PR if that fixes it. We can try pushing that PR through again later after resolving the issue. Should I raise the PR or are you on it @luacmartins?

[luacmartins]

I think @kosmydel should work on v3 of that PR and fix this issue

[luacmartins]

Offending PR was reverted. Removing blocker label.

[arosiclair]

This should be all set