[Due for payment 2025-05-20] [$250] mWeb - Room - Keyboard opened with device´s back button on different sections on room creation

[jponikarchuk]

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: 9.1.31-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): ibellicotest+607@gmail.com
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12 - Chrome
App Component: Other

Action Performed:

1. Open the staging.new.expensify.com website.
2. Tap on FAB and select "Start Chat"
3. Select room.
4. With keyboard opened, tap on "Workspace"
5. Use device´s back button to return to previous page.
6. Check the keyboard behaviour with this action.
7. Return to the room creation page.
8. With keyboard opened, now tap on "Who can post"
9. Use device´s back button again to return to previous page.
10. Check the keyboard behaviour with this action.
11. Open the room creation page one more time.
12. With keyboard opened, tap on "Visibility"
13. Use device´s back button to return to previous page.
14. Check the keyboard behaviour with this action.

Expected Result:

Using device´s back button on any section while creating a room, should return the user to the previous page.

Actual Result:

Using device´s back button on any section while creating a group, opens the keyboard instead of returning to previous page. User has to use device´s back button two more times to return to previous page. Also, there is no text input on any of the opened sections, so the keyboard shouldn´t be opened at any time.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021915752259336206853
• Upwork Job ID: 1915752259336206853
• Last Price Increase: 2025-05-02
• Automatic offers:
• truph01 | Contributor | 107178707

Issue Owner

Current Issue Owner: @dylanexpensify

[melvin-bot]

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

[linhvovan29546]

Proposal

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

mWeb - Room - Keyboard opened with device´s back button on different sections on room creation

What is the root cause of that problem?

On the "Start chat" page, we use the ValuePicker component to render Input and value selecter. And in the ValueSelectorModal, we are missing the shouldHandleNavigationBack prop. As a result, when the modal is open and the device's back button is pressed, it does not navigate back to the previous screen.

App/src/pages/workspace/WorkspaceNewRoomPage.tsx

Lines 273 to 274 in a2b6087

	<InputWrapper
	InputComponent={ValuePicker}

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

We should add the shouldHandleNavigationBack prop to the Modal in the ValueSelectorModal, like

App/src/components/ValuePicker/ValueSelectorModal.tsx

Line 24 in a2b6087

<Modal

        <Modal
            type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
            shouldHandleNavigationBack // new

We can also introduce a new prop and pass it to the ValueSelectorModal to enable navigation

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None,

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[truph01]

Proposal

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

• When using the device’s back button during group creation, the keyboard unexpectedly opens instead of navigating back. Users need to press the back button two additional times to return to the previous screen. This is especially confusing since none of the opened sections have any text input fields, so the keyboard should not appear at all.

What is the root cause of that problem?

• After step 3, the navigation state is:

├── ReportsSplitNavigator (index: 0)
│   └── Home
└── RightModalNavigator (index: 0)
    └── NewChat (index: 0)
        └── NewChat_Root (index: 1)
            └── TAB (index: 1)
                ├── chat
                └── room

The focused screen at this point is room.

• Sections like Workspace, Who Can Post, and Visibility are displayed as modals. After completing step 5, the navigation state becomes:

├── ReportsSplitNavigator (index: 0)
│   └── Home
└── RightModalNavigator (index: 0)
    └── NewChat (index: 0)
        └── NewChat_Root (index: 0)
            └── TAB (index: 0)
                ├── chat
                └── room

Now, the focused screen is chat.

• In the chat screen, we have a logic that auto-focuses the input field:
  

  App/src/components/SelectionList/BaseSelectionList.tsx

  Line 711 in a2b6087

  useFocusEffect(

Since the room screen still exists in the navigation stack, the modal selectors (e.g., Workspace, Who Can Post, Visibility) are still displayed, but chat is focused. This causes the input field to auto-focus and the keyboard to open, leading to the undesired behavior when the back button is pressed.

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

• After step 5, the focused screen should be room instead of chat. To do it, in here, we can use shouldHandleNavigationBack={isMobileChrome()}.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• UI issue

What alternative solutions did you explore? (Optional)

[github-actions]

⚠️ @truph01 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[melvin-bot]

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

[melvin-bot]

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