[Due for payment 2025-02-28] [$250] Keyboard opens with composer autofocused when modifying an expense and go back to the report

[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.87-2
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: @saracouto
Slack conversation (hyperlinked to channel name): expense

Action Performed:

1. Open any expense or a comment in the report
2. Change and save any detail in the expense or thread in the comment
3. Tap back to go back to the expense report or parent comment

Expected Result:

Keyboard does not open with composer autofocussed

Actual Result:

Keyboard opens with composer autofocused when modifying an expense and go back to the report

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

SKKV0753.1.MP4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021884356731032077905
• Upwork Job ID: 1884356731032077905
• Last Price Increase: 2025-01-28

Issue Owner

Current Issue Owner: @jayeshmangwani

[melvin-bot]

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

[shawnborton]

Just leaving a comment here that we would love to remove the autofocus of the chat composer is all of these cases. We do NOT want to touch the autofocus behavior of push inputs and things like that, but we think that navigating to a chat room on a mobile device should not autofocus the composer.

[truph01]

Proposal

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

• Keyboard opens with composer autofocused when modifying an expense and go back to the report

What is the root cause of that problem?

• When going back to expense report, the shouldAutoFocus is true in:

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

Line 269 in bec182c

const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && Modal.areAllModalsHidden() && isFocused && !didHideComposerInput;

So, the composer is auto focused. And because we call:

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

Line 685 in bec182c

setShowSoftInputOnFocus(true);

the keyboard will be shown as mentioned in OP.

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

• We can add an additional canFocusInputOnScreenFocus() && to:

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

Line 269 in bec182c

const shouldAutoFocus = !modal?.isVisible && shouldShowComposeInput && Modal.areAllModalsHidden() && isFocused && !didHideComposerInput;

• And we can remove this:

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

Line 685 in bec182c

setShowSoftInputOnFocus(true);

and add useEffect:

    useEffect(() => {
        if (!isFocused && prevIsFocused) {
            setShowSoftInputOnFocus(false);
        }
    }, [isFocused, prevIsFocused, setShowSoftInputOnFocus]);

This is optional solution to make sure keyboard never shows when going back.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

[bernhardoj]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-21 16:39:16 UTC.

🚨 Edited by proposal-police: This proposal was edited at 2025-01-21 16:37:34 UTC.

🚨 Edited by proposal-police: This proposal was edited at 2025-01-21 07:10:16 UTC.

Proposal

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

Based on @shawnborton latest comment, we don't want to autofocus the composer on mobile.

What is the root cause of that problem?

There are 2 codes that are responsible for the issue. useResetComposerFocus and useAutoFocusInput.

App/src/components/Composer/implementation/index.native.tsx

Line 47 in f51798b

const {isFocused, shouldResetFocusRef} = useResetComposerFocus(textInput);

App/src/components/Composer/implementation/index.native.tsx

Line 56 in f51798b

const {inputCallbackRef, inputRef: autoFocusInputRef} = useAutoFocusInput();

useAutoFocusInput is responsible for autofocusing the input when mounted and refocusing it every time the screen regains focus.

useResetComposerFocus on the other hand is responsible for refocusing the input every time the screen regains focus, but only if the input is previously focused. It was added at #33466.

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

We need to remove both useAutoFocusInput and useResetComposerFocus usages from composer/implementation/index.native.tsx and remove the autoFocus prop.

App/src/components/Composer/implementation/index.native.tsx

Line 161 in d16855f

autoFocus={getPlatform() !== 'android' ? autoFocus : false}

If we want to keep the logic to autofocus when opening the report for the first time, then we need to keep useAutoFocusInput and add a new param to useAutoFocusInput so that it only auto-focus once and not every time the screen is refocused. Then, we can update the focus logic to skip if it's focused at least once.

App/src/hooks/useAutoFocusInput.ts

Lines 24 to 35 in f51798b

	useEffect(() => {
	if (!isScreenTransitionEnded || !isInputInitialized || !inputRef.current || splashScreenState !== CONST.BOOT_SPLASH_STATE.HIDDEN) {
	return;
	}
	const focusTaskHandle = InteractionManager.runAfterInteractions(() => {
	if (inputRef.current && isMultiline) {
	moveSelectionToEnd(inputRef.current);
	}
	inputRef.current?.focus();
	setIsScreenTransitionEnded(false);
	});

useEffect(() => {
    // once is the new param
    if ((once && focused.current) || ...) {
        return;
    }
    const focusTaskHandle = InteractionManager.runAfterInteractions(() => {
        ...
        inputRef.current?.focus();
        focused.current = true;
    });

This will fix for native platforms. For mWeb platforms, we can update the autoFocus condition in composer/implementation/index.tsx file so it's only true if it's not a mobile.

App/src/components/Composer/implementation/index.tsx

Line 375 in ab3a7ee

autoFocus={autoFocus}

autoFocus={!isMobile() && autoFocus}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[shawnborton]

we don't want to refocus the composer when going back from other page to the report page.

I think in general, on mobile devices, we do not want to autofocus the chat composer ever.

[bernhardoj]

I see. I was not sure because in this issue, we want to always autofocus the composer when opening a report, but not show the keyboard. I have updated my proposal so it will never autofocus the composer on mobile.

[melvin-bot]

@muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@muttmuure 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

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

[melvin-bot]

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

[jayeshmangwani]

@shawnborton, currently when we go to any report on mobile devices, we indicate focus on the composer with a green outline, but we do not open the keyboard. I think we want to keep this behavior, right? What do you think?

I'm adding a video below to break this down.

First, I navigated to the workspace chat that has one IOU report. Here, we can see that the composer is focused, but the keyboard doesn’t open. Then, I navigated to the IOU report, and again, the keyboard doesn’t open, but the composer still looks focused.

However, when I navigated to the report description and then came back to the IOU report, the keyboard opened. IMO, We only need to fix the keyboard opening in this case.

iou-keyboard-issue.mov

[shawnborton]

currently when we go to any report on mobile devices, we indicate focus on the composer with a green outline, but we do not open the keyboard. I think we want to keep this behavior, right? What do you think?

We definitely do not want to keep that. I actually think that's a bug... why would we show the composer as being focused if the user can't even type into it? So I say we remove that styling and only show focused composer styles if the composer is indeed focused.

[jayeshmangwani]

If we don't want to auto-focus on mobile devices or show the green active composer outline altogether, We can go with @bernhardoj 's Proposal to remove the usage of useAutoFocusInput and also remove autoFocus prop from the Composer native file

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

@marcochavezf @jayeshmangwani @muttmuure this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

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

[jayeshmangwani]

@marcochavezf, whenever you get a chance, please check this comment for the above proposal.

[melvin-bot]

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

[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.1.3-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Prevent autofocus/refocus on small screen on the report page #56396

If no regressions arise, payment will be issued on 2025-02-28. 🎊

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

• @jayeshmangwani requires payment through NewDot Manual Requests
• @bernhardoj requires payment through NewDot Manual Requests

[melvin-bot]

@jayeshmangwani @jayeshmangwani 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]

[jayeshmangwani]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other: This is a UI enhancement from the previous expected behavior. Earlier, we had decided to auto-focus the input on mobile devices if it was previously focused on the page and the user navigated back to it from another page.

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: I don’t think any single PR introduced this behavior. Previously, we had intentionally added focus for certain cases.

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: https://expensify.slack.com/archives/C01GTK53T8Q/p1740682679344749

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Scenario 1: Unsettled Expense Composer Focus

1. Open the app on a device where the user has an unsettled expense.
2. Open the expense thread chat.
3. Verify that the composer is:
   • Focused on Web/Desktop.
   • Not focused on iOS, Android, and mWeb.
4. Edit any field in the money request.
5. Verify the composer behavior again:
   • Focused on Web/Desktop.
   • Not focused on iOS, Android, and mWeb.

Scenario 2: Attachment Composer Focus

1. Open the app and go to any chat.
2. Send an attachment to the user.
3. Move the app to the background, then return to the chat.
4. Verify the composer behavior:
   • Focused on Web/Desktop.
   • Not focused on iOS, Android, and mWeb.

Do we agree 👍 or 👎

[bernhardoj]

Requested in ND.

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @OfstadC you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @jayeshmangwani owed $250 via NewDot
• Reviewer: @bernhardoj owed $250 via NewDot

BugZero Checklist (@OfstadC)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1884356731032077905/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[OfstadC]

All set!

[JmillsExpensify]

$250 approved for @bernhardoj