[HOLD for payment 2024-12-16] [$250] The Composer isn't getting focus again after the attachment modal is dismissed

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.65-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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
Expensify/Expensify Issue URL:
Issue reported by: @DylanDylann
Slack conversation (hyperlinked to channel name): ts_external_expensify_bugs

Action Performed:

1. Go to any chat
2. Click on Emoji button on composer
3. Click outside to turn off emoji modal
4. The main composer is focused again
5. Click on Search button
6. Click outside to turn off search modal
7. The main composer is focused again
8. Click on + Button > Add attachment
9. Close the attachment modal

Expected Result:

The Composer should be focused again

Actual Result:

The Composer isn't getting focus again
The same issue also happens when turning off task creation RHP

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug-focus-modal.mov

Bug-focus-RHP.mov

Recording.773.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861194329606469814
• Upwork Job ID: 1861194329606469814
• Last Price Increase: 2024-11-25
• Automatic offers:
• DylanDylann | Reviewer | 105121364
• FitseTLT | Contributor | 105121366

Issue Owner

Current Issue Owner: @

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.

[m-natarajan]

Discovered this bug while reviewing this PR by @DylanDylann

[DylanDylann]

@VictoriaExpensify Could I take over this issue if this is external? because of more context here

[melvin-bot]

@VictoriaExpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[VictoriaExpensify]

Thanks for the context @DylanDylann - It's all yours

[melvin-bot]

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

[melvin-bot]

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

[VictoriaExpensify]

Not overdue

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-11-26 15:27:38 UTC.

Proposal

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

The Composer isn't getting focus again after the attachment modal is dismissed

What is the root cause of that problem?

1. It doesn't auto-focus when the RHP has text input
   We already have a code to regaing focus on RHP modal hide here
   

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

   Lines 646 to 654 in 70461d0

   	if (!((willBlurTextInputOnTapOutside || shouldAutoFocus) && !isNextModalWillOpenRef.current && !modal?.isVisible && isFocused && (!!prevIsModalVisible || !prevIsFocused))) {
   	return;
   	}
   	if (editFocused) {
   	InputFocus.inputFocusChange(false);
   	return;
   	}
   	focus(true);

   
   but the focus here is called too early especially when there is a text input on the RHP
   

   App/src/libs/focusComposerWithDelay/index.ts

   Line 34 in 70461d0

   textInput.focus();

   
   2.Auto focus not working after closing attachment picker: We are not focusing the composer on closing of the attachment modal unlike emoji picker case where we focused onModalHide here
   

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

   Line 529 in 084a711

   focus();

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

1. We need to delay the focus call here to be called on the next rendering cycle
   

   App/src/libs/focusComposerWithDelay/index.ts

   Line 34 in 70461d0

   textInput.focus();

            setTimeout(() => textInput.focus());

We should pass focus for onCanceledAttachmentPicker of the attachment picker

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

Line 465 in 084a711

actionButtonRef={actionButtonRef}

 onCanceledAttachmentPicker={() => {
                                                if (!shouldFocusInputOnScreenFocus) {
                                                    return;
                                                }
                                                focus();
                                            }}

What alternative solutions did you explore? (Optional)

[DylanDylann]

@FitseTLT Please detail your alternative solution. Note that we only apply this fix for the large screen

Additionally, you missed the second bug: The main composer focus again after turn off RHP strict create expense but not in other RHP

[FitseTLT]

@DylanDylann Updated

[DylanDylann]

I don't think setTimeout is recommended in our codebase

[FitseTLT]

@DylanDylann what about runAfterInteraction?

[FitseTLT]

@DylanDylann Let me explain it a bit for you:
For our modals we already have our method isReadyToFocus

App/src/libs/focusComposerWithDelay/index.ts

Line 30 in 70461d0

Promise.all([ComposerFocusManager.isReadyToFocus(), isWindowReadyToFocus()]).then(() => {

which will dispatch the focus when the open modal has been dismissed

App/src/components/Modal/BaseModal.tsx

Lines 151 to 153 in 70461d0

	const handleDismissModal = () => {
	ComposerFocusManager.setReadyToFocus(uniqueModalId);
	};

The problem is RHP are not like our modals and it is opened by navigation and the modal value will be set to false when the current screen/RHP is blurred here

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

Lines 214 to 215 in 70461d0

	blur: () => {
	Modal.setModalVisibility(false);

that will trigger the effect to focus the composer here

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

Lines 646 to 654 in 70461d0

	if (!((willBlurTextInputOnTapOutside || shouldAutoFocus) && !isNextModalWillOpenRef.current && !modal?.isVisible && isFocused && (!!prevIsModalVisible || !prevIsFocused))) {
	return;
	}
	if (editFocused) {
	InputFocus.inputFocusChange(false);
	return;
	}
	focus(true);

But the onBlur is called too early immediately when the navigation away from the RHP starts even before the animation to close the RHP is finished so if there is a text input in the RHP our focus function will not focus the composer.
Therefore for a similar solution we used as isReadyToFocus one we should set some file-level variable on blur of the screen like didRHPDismissed and here

App/src/libs/ComposerFocusManager.ts

Lines 215 to 216 in 70461d0

	if (!promise) {
	return Promise.resolve();

instead immediately resolving when there is no promise when the didRHPDismissed is true we will resolve it after some delay as CONST.ANIMATED_TRANSITION because the modal is correctly dismissed by that time. WDYT

[DylanDylann]

@FitseTLT's #52898 (comment) looks good to me

After testing I see setTimeout gives a better output than runAfterInteraction. However, runAfterInteraction can be a safer option because we need to avoid using setTimeout as much as possible in our App.

Note in the PR phase: We need to make sure this change doesn't affect the current behavior on mobile web, app

🎀 👀 🎀 C+ Reviewed

[melvin-bot]

Triggered auto assignment to @grgia, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @FitseTLT 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[grgia]

Assigned!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.72-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix - The Composer isn't getting focus again after the attachment modal is dismissed #53328

If no regressions arise, payment will be issued on 2024-12-16. 🎊

For reference, here are some details about the assignees on this issue:

• @FitseTLT requires payment automatic offer (Contributor)
• @DylanDylann requires payment automatic offer (Reviewer)
• @DylanDylann requires payment automatic offer (Reviewer)

[melvin-bot]

@DylanDylann @VictoriaExpensify @DylanDylann The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[VictoriaExpensify]

Payment Summary:
Contributor: @FitseTLT paid $250 via Upwork
C+: @DylanDylann paid $250 via Upwork