[HOLD for payment 2024-03-07] [$500] mWeb - Chat - A keyboard briefly appears when navigating to Concierge chat via direct link

[kbecciv]

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.32-2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/1971198
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:

Precondition: User is logged in https://staging.new.expensify.com/
on mWeb.

1. Open https://staging.new.expensify.com/
2. Send a message in that chat including the url https://staging.new.expensify.com/concierge
3. Click on the link

Expected Result:

Concierge chat opens. No keyboard appears until user set focus in compose box.

Actual Result:

Concierge chat opens. A keyboard briefly appears and closes automatically.
NOTE: when user navigates to Concierge chat via conversation link (e.g. https://staging.new.expensify.com/r/5636303947728298
) no keyboard appears.

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

Bug6355692_1706268688382.20240126_123623.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01388f2992fda42f8a
• Upwork Job ID: 1750854287615062016
• Last Price Increase: 2024-02-16
• Automatic offers:
• shubham1206agra | Reviewer | 0
• bernhardoj | Contributor | 0

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-vsb
CC @quinthar

[bernhardoj]

Proposal

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

Keyboard opens briefly if we navigate to /concierge from chat.

What is the root cause of that problem?

We have a logic to refocus the keyboard every time the report screen gets focused.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js

Lines 483 to 500 in 54013d3

	useEffect(() => {
	if (modal.isVisible && !prevIsModalVisible) {
	// eslint-disable-next-line no-param-reassign
	isNextModalWillOpenRef.current = false;
	}
	// We want to focus or refocus the input when a modal has been closed or the underlying screen is refocused.
	// We avoid doing this on native platforms since the software keyboard popping
	// open creates a jarring and broken UX.
	if (!((willBlurTextInputOnTapOutside || shouldAutoFocus) && !isNextModalWillOpenRef.current && !modal.isVisible && isFocused && (prevIsModalVisible || !prevIsFocused))) {
	return;
	}
	if (editFocused) {
	InputFocus.inputFocusChange(false);
	return;
	}
	focus(true);
	}, [focus, prevIsFocused, editFocused, prevIsModalVisible, isFocused, modal.isVisible, isNextModalWillOpenRef, shouldAutoFocus]);

When we go to /concierge, it will open ConciergePage, a utility page to go to the concierge chat, and then simply pops out itself.

App/src/pages/ConciergePage.tsx

Lines 31 to 34 in 54013d3

	Navigation.isNavigationReady().then(() => {
	Navigation.goBack(ROUTES.HOME);
	Report.navigateToConciergeChat();
	});

When the ConciergePage is popped out from the stack, the current report screen gets refocused, thus the keyboard shows.

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

When we navigate to the concierge page, we can replace the ConciergePage screen with the Concierge report screen instead of popping out itself. This way, we can prevent the previous report screen gets refocused.

Navigation.isNavigationReady().then(() => {
    Report.navigateToConciergeChat(false, true);
});

function navigateToConciergeChat(ignoreConciergeReportID = false, shouldReplace = false) {
    navigateToAndOpenReport([CONST.EMAIL.CONCIERGE], false, shouldReplace)
    ...
    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(conciergeChatReportID), shouldReplace ? 'FORCED_UP' : '');

What alternative solutions did you explore? (Optional)

I have a PR here that will add a new param to navigateToConciergeChat to dismiss the modal when navigating to concierge chat. We can make use of the dismiss modal too and update dismissModal modal logic to include concierge chat.

App/src/libs/Navigation/dismissModal.ts

Lines 28 to 32 in 54013d3

	switch (lastRoute?.name) {
	case NAVIGATORS.LEFT_MODAL_NAVIGATOR:
	case NAVIGATORS.RIGHT_MODAL_NAVIGATOR:
	case SCREENS.NOT_FOUND:
	case SCREENS.REPORT_ATTACHMENTS:

case SCREENS.CONCIERGE:

or don't refocus on mWeb just like native.

[dylanexpensify]

confirming today!