[HOLD for payment 2023-08-02] [$1000] App does not focus on compose box on mark as read/unread when we visit other profile and get back

[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 the app
2. Open any group report
3. Right click on group report in LHN and click on mark as read/unread to observe that it focuses on compose box
4. Now open group details page by clicking on group avatar, click on any user and click on message
5. Use browser back button to get back to group chat, right click on group chat in LHN and click on mark as unread
6. Observe the it does not focus on compose box

Expected Result:

App should focus on compose box on click of mark as unread/read for any chat from LHN

Actual Result:

App does not focus on compose box on click of mark as unread/read for group chat from LHN if we open group details, click on any user, click message and click on browser back to come back to group chat

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.33-4
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

Desktop.2023.06.26.-.21.02.38.18.mp4

focus.on.compose.box.mark.as.read.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1687606178130269

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012eff16d4d91d5c21
• Upwork Job ID: 1673981095886499840
• Last Price Increase: 2023-07-12

[melvin-bot]

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

[conorpendergrast]

Reproduced on OSX desktop app too

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

Proposal

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

After going back from another chat, the composer won't focus after pressing Mark as read/unread. To be clearer, the composer focus manager doesn't work.

What is the root cause of that problem?

We have a composer focus manager that will listen to any call of ReportActionComposeFocusManager.focus().

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

Lines 229 to 237 in 94e2656

	// This callback is used in the contextMenuActions to manage giving focus back to the compose input.
	// TODO: we should clean up this convoluted code and instead move focus management to something like ReportFooter.js or another higher up component
	ReportActionComposeFocusManager.onComposerFocus(() => {
	if (!this.willBlurTextInputOnTapOutside || !this.props.isFocused) {
	return;
	}
	this.focus(false);
	});

When we open chat A, a listener is added.

App/src/libs/ReportActionComposeFocusManager.js

Lines 7 to 15 in 94e2656

	/**
	* Register a callback to be called when focus is requested.
	* Typical uses of this would be call the focus on the ReportActionComposer.
	*
	* @param {Function} callback callback to register
	*/
	function onComposerFocus(callback) {
	focusCallback = callback;
	}

Navigating to chat B will replace the A listener with B. When we press back from B, B will unmount and the listener is cleared.

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

Lines 275 to 277 in 94e2656

	componentWillUnmount() {
	ReportActionComposeFocusManager.clear();
	}

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

Initialize the listener on both mount and update. On update, only add the listener if the screen becomes focused, i.e.

if (!prevProps.isFocused && this.props.isFocused) { focusManager.onComposerFocus() }

What alternative solutions did you explore? (Optional)

Currently, we only store the latest callback. Instead,

1. We can change it to an array and push a new callback every time a new listener is added.
2. Return a function to unsubscribe it instead of using clear.
3. When calling focus, iterate over the array and invoke the callback

snippet

function onComposerFocus(callback) {
    const prevCallbacks = [...focusCallback];
    focusCallback.push(callback);
    return () => {
        focusCallback = prevCallbacks;
    }
}
function focus() {
    _.each(focusCallback, (callback) => {
        if (!_.isFunction(callback)) {
            return;
        }

        callback();
    });
}