[HOLD for payment 2023-09-04] [$1000] App changes focus from edit message composer to send message composer when mark as unread

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open any report
2. Send any message
3. Hover message and click edit
4. Right click on report on LHN => mark as unread
5. Observe that the app loses focus on edit composer and switches to focus send message composer

Expected Result:

App still keeps focus on the message being edited

Actual Result:

App loses focus on edit composer and switches to focus send message composer

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.47-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-07-30.at.13.49.59.mov

Recording.1407.mp4

Expensify/Expensify Issue URL:
Issue reported by: @namhihi237
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690700101909109

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012c0c567372dabdf6
• Upwork Job ID: 1686829305551839232
• Last Price Increase: 2023-08-09
• Automatic offers:
• Ollyws | Reviewer | 26050166
• tienifr | Contributor | 26050168
• namhihi237 | Reporter | 26050169

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[rayane-d]

Proposal

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

The application changes focus from the edit message composer to the send message composer when an action ("Mark as Read", "Mark as Unread", "Pin", or "Unpin") is triggered in the Left Hand Navigation (LHN) report context menu.

What is the root cause of that problem?

In the file App/src/pages/home/report/ContextMenu/ContextMenuActions.js, the onPress functions for the "Mark as Read", "Mark as Unread", "Pin", and "Unpin" actions in the context menu are causing the focus shift. When a report is marked as read/unread or pinned/unpinned, the context menu is hidden, and the focus is set to the ReportActionCompose component (the message composer), regardless of whether a message was being edited previously.

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 253 to 266 in eb02006

	{
	isAnonymousAction: false,
	textTranslateKey: 'reportActionContextMenu.markAsRead',
	icon: Expensicons.Mail,
	successIcon: Expensicons.Checkmark,
	shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, isPinnedChat, isUnreadChat) => type === CONTEXT_MENU_TYPES.REPORT && isUnreadChat,
	onPress: (closePopover, {reportID}) => {
	Report.readNewestAction(reportID);
	if (closePopover) {
	hideContextMenu(true, ReportActionComposeFocusManager.focus);
	}
	},
	getDescription: () => {},
	},

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 237 to 251 in eb02006

	{
	isAnonymousAction: false,
	textTranslateKey: 'reportActionContextMenu.markAsUnread',
	icon: Expensicons.Mail,
	successIcon: Expensicons.Checkmark,
	shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, isPinnedChat, isUnreadChat) =>
	type === CONTEXT_MENU_TYPES.REPORT_ACTION || (type === CONTEXT_MENU_TYPES.REPORT && !isUnreadChat),
	onPress: (closePopover, {reportAction, reportID}) => {
	Report.markCommentAsUnread(reportID, reportAction.created);
	if (closePopover) {
	hideContextMenu(true, ReportActionComposeFocusManager.focus);
	}
	},
	getDescription: () => {},
	},

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 311 to 324 in eb02006

	{
	isAnonymousAction: false,
	textTranslateKey: 'common.pin',
	icon: Expensicons.Pin,
	shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, isPinnedChat) =>
	type === CONTEXT_MENU_TYPES.REPORT && !isPinnedChat && !ReportUtils.isMoneyRequestReport(reportID),
	onPress: (closePopover, {reportID}) => {
	Report.togglePinnedState(reportID, false);
	if (closePopover) {
	hideContextMenu(false, ReportActionComposeFocusManager.focus);
	}
	},
	getDescription: () => {},
	},

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 325 to 338 in eb02006

	{
	isAnonymousAction: false,
	textTranslateKey: 'common.unPin',
	icon: Expensicons.Pin,
	shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, isPinnedChat) =>
	type === CONTEXT_MENU_TYPES.REPORT && isPinnedChat && !ReportUtils.isMoneyRequestReport(reportID),
	onPress: (closePopover, {reportID}) => {
	Report.togglePinnedState(reportID, true);
	if (closePopover) {
	hideContextMenu(false, ReportActionComposeFocusManager.focus);
	}
	},
	getDescription: () => {},
	},

This is the key line responsible for the focus shift:

hideContextMenu(true, ReportActionComposeFocusManager.focus);

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

To resolve this issue, we should modify the onPress functions for the "Mark as Read", "Mark as Unread", "Pin", and "Unpin" actions to avoid setting the focus to the message composer. we can simply pass undefined as the second parameter to the hideContextMenu function. This would ensure that the focus isn't shifted from the edit composer:

onPress: (closePopover, {reportID}) => { 
    // ... action code
    if (closePopover) { 
        hideContextMenu(true, undefined); 
    } 
}, 

My proposal targets this specific undesired behavior of unintended focus shift. By passing 'undefined' to the 'hideContextMenu' function, we ensure that the current focus state is retained and does not automatically shift to the message composer when the user performs one of the specified actions. If the user is editing a message, it keeps the focus on the edit field; if a user is composing a new message, it keeps the focus on the message composer; and if the user is not focused on any input, it does not impose a forced focus. This approach respects the user's current context and maintains their interaction flow, which results in an improved user experience.

Result:

2023-07-30.23-02-16.mp4

What alternative solutions did you explore? (Optional)

None.

[dummy-1111]

Proposal

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

App changes focus from edit message composer to main composer when mark as unread in LHN

What is the root cause of that problem?

When pressing mark as unread, ReportActionComposeFocusManager.focus function is called as you can see here.

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Line 247 in eb02006

hideContextMenu(true, ReportActionComposeFocusManager.focus);

We set this callback function when we open any chat

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

Lines 248 to 253 in eb02006

	this.unsubscribeNavigationFocus = this.props.navigation.addListener('focus', () => {
	KeyDownListener.addKeyDownPressListner(this.focusComposerOnKeyPress);
	this.setUpComposeFocusManager();
	});
	KeyDownListener.addKeyDownPressListner(this.focusComposerOnKeyPress);
	this.setUpComposeFocusManager();

But we setup focus callback only on main composer. So the focus function of the main composer would be called regardless of which is focused at the time menu is selected.

The root cause of this issue is that we only setup focus callback only for the main composer.

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

The focus manager should be setup for any composer with focus. This is reasonable and consistent to manager's purpose

Logic:

• Manage main composer(ReportActionCompose) and editing composer(ReportActionItemMessageEdit) separately
• When set callback for editing composer, save reportActionID as well
• When focus is called, if there is a callback for editing composer, call that callback. If there is no callback for editing composer, call main composer callback if exists.
• Set callback on focus event and clear calback on unmount event for both main composer and editing composer. On unmount for editing callback, compare the reportActionID first and clear if its reportActionID is equal to reportActionID stored in the manager.

This works as expected

Result

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

Current assignee @maddylewis is eligible for the External assigner, not assigning anyone new.