[HOLD for payment 2024-08-19] [$250] Chat Composer - Composer doesn't get focused when coming from share code link

[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: 9.0.11-1
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): biruknew45+77g7@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to [staging.new.expensify.com]
2. Create a workspace.
3. From the Left-Hand Navigation (LHN), click on #admin.
4. Type something on the keyboard and observe composer gets active
5. Click outside of the composer and type something on the keyboard and observe the composer gets active again
6. Go to Settings.
7. Click on Workspaces.
8. Click on the Share Code.
9. Click the #admin link.
10. Type something on the keyboard
11. Click outside the composer and type something on the keyboard

Expected Result:

The chat composer should capture keyboard input without needing to be explicitly clicked, ensuring consistent behavior across all sections, including the admin section.

Actual Result:

Upon clicking the #admin from the LHN, the chat composer is focused and captures keyboard input, but when clicking the #admin link from the workspace, the chat composer is not focused and does not capture keyboard input unless explicitly clicked.

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

Bug6550949_1721766390203.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0184ef1555e5c992be
• Upwork Job ID: 1818466383231404218
• Last Price Increase: 2024-07-31
• Automatic offers:
• ZhenjaHorbach | Reviewer | 103399073

Issue Owner

Current Issue Owner: @VictoriaExpensify

[melvin-bot]

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

[bernhardoj]

Proposal

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

Pressing any key doesn't work after coming from workspace share page link.

What is the root cause of that problem?

The composer will be focused only if checkComposerVisibility returns true.

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

Lines 608 to 613 in 904e950

	const focusComposerOnKeyPress = useCallback(
	(e: KeyboardEvent) => {
	const isComposerVisible = checkComposerVisibility();
	if (!isComposerVisible) {
	return;
	}

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

Lines 602 to 606 in 904e950

	const checkComposerVisibility = useCallback(() => {
	// Checking whether the screen is focused or not, helps avoid `modal.isVisible` false when popups are closed, even if the modal is opened.
	const isComposerCoveredUp = !isFocused || EmojiPickerActions.isEmojiPickerVisible() || isMenuVisible || !!modal?.isVisible || modal?.willAlertModalBecomeVisible;
	return !isComposerCoveredUp;
	}, [isMenuVisible, modal, isFocused]);

However, in our case, it returns false because modal.isVisible is true. When we open the share code RHP page, the modal visible is set to true.

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 177 to 180 in 904e950

	const modalScreenListeners = {
	focus: () => {
	Modal.setModalVisibility(true);
	},

When we press the #admins link, we don't close the RHP, so the modal visible state is never updated.

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

We can either call goBack first before navigating or replace it with Navigation.dismissModal(adminRoom.reportID).

However, even though the composer is focused, the green outline isn't visible. It's because the full screen navigator from the workspace page is still active. We need to return false for isActive here for full screen navigator if the screen isn't focused.

App/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

Lines 18 to 34 in 904e950

	const isActive = useMemo(() => {
	// Focus trap can't be active on bottom tab screens because it would block access to the tab bar.
	if (BOTTOM_TAB_SCREENS.find((screen) => screen === route.name)) {
	return false;
	}
	// in top tabs only focus trap for currently shown tab should be active
	if (TOP_TAB_SCREENS.find((screen) => screen === route.name)) {
	return isFocused;
	}
	// Focus trap can't be active on these screens if the layout is wide because they may be displayed side by side.
	if (WIDE_LAYOUT_INACTIVE_SCREENS.includes(route.name) && !isSmallScreenWidth) {
	return false;
	}
	return true;
	}, [isFocused, isSmallScreenWidth, route.name]);

if (route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR) {
    return isFocused;
}

[VictoriaExpensify]

I'll look at this tomorrow

[melvin-bot]

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

[melvin-bot]

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