[$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 contributors@expensify.com 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.

[dannymcclain]

So I say we remove that styling and only show focused composer styles if the composer is indeed focused.

Big agree. Let's try to get this one moving, the autofocus when returning is super annoying!

[marcochavezf]

Apologies for the delay, the proposal looks good. Thanks for the review @jayeshmangwani, assigning @bernhardoj 🚀

[bernhardoj]

PR is ready

cc: @jayeshmangwani

[mvtglobally]

Issue not reproducible during KI retests. (First week)