[$250] keyboard hides unexpectedly when adding a new task on the report screen

[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.46-3
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
Expensify/Expensify Issue URL:
Issue reported by: @jayeshmangwani
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1728308186934659

Action Performed:

1. Go to any chat and add a new task. (keyboard should open at this point)
2. Tap on the newly created task to view task details.
3. Check the composer.

Expected Result:

Keyboard should remain open when viewing the task details.

Actual Result:

Composer is shown as active, but the keyboard is hidden.

Workaround:

unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Android.keyboard.mp4

az_recorder_20241008_131240.1.mp4

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021844835682397684717
• Upwork Job ID: 1844835682397684717
• Last Price Increase: 2024-11-08

[melvin-bot]

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

[QichenZhu]

Proposal

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

Tapping a task on the report screen while the soft keyboard is open will close the keyboard.

What is the root cause of that problem?

The soft keyboard is closed during the screen transition by the two pieces of code below.

https://github.com/react-navigation/react-navigation/blob/4caf3cb849a8708a36d0dbf22dac432d2ca780be/packages/stack/src/utils/useKeyboardManager.tsx#L51

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

Line 663 in 1c0d2fa

textInputRef.current?.blur();

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

We don't need to pass the autoFocus attribute to the Android native input since useAutoFocusInput will take care of it after the screen transaction ends.

const isAndroidNative = getPlatform() === CONST.PLATFORM.ANDROID;

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

Line 127 in 1c0d2fa

autoFocus={autoFocus}

autoFocus={isAndroidNative ? undefined : autoFocus}

What alternative solutions did you explore? (Optional)

We could consider disabling auto focus for the task details screen, just like we did for the money request details screen below.

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

Lines 302 to 307 in 1c0d2fa

	const shouldAutoFocus =
	!modal?.isVisible &&
	Modal.areAllModalsHidden() &&
	isFocused &&
	(shouldFocusInputOnScreenFocus || (isEmptyChat && !ReportActionsUtils.isTransactionThread(parentReportAction))) &&
	shouldShowComposeInput;

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[QichenZhu]

UPDATE: My proposal doesn’t apply to the latest main.

showSoftInputOnFocus is set to false on purpose to fix #10731, so it’s expected that the soft keyboard doesn’t show.

UPDATE 2: My proposal is valid again since PR #50279 is reverted.

[melvin-bot]

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

[johncschuster]

Looks like we're still waiting on proposals

[johncschuster]

Bump for Melv

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[johncschuster]

@allgandalf can you take a look at @QichenZhu's proposal and let me know if it's sufficient? If not, I'll drum up more proposals!

[mollfpr]

@johncschuster Do you mean me? 😅

I'll review the latest proposal!

[melvin-bot]

@johncschuster @mollfpr 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!

[johncschuster]

@allgandalf

@johncschuster Do you mean me? 😅

.... 🤦 .... yes. Sorry about that! Did you get a chance to review the latest proposal?

[mollfpr]

@QichenZhu to be clear the autoFocus from the text input conflict with the blur/dismiss from the library and our component?

Also, why do we still need the autoFocus property for iOS even though the useAutoFocusInput also focuses on the input?

[mollfpr]

I repro the issue a while ago, but after pulling the latest main is not reproducing.

Screen_Recording_20241025_201335_New.Expensify.Dev.mov

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[QichenZhu]

after pulling the latest main is not reproducing

Still reproducible on my end.

1000000765-2024-10-25.21_10_10.201.mp4

to be clear the autoFocus from the text input conflict with the blur/dismiss from the library and our component?

Also, why do we still need the autoFocus property for iOS even though the useAutoFocusInput also focuses on the input?

@mollfpr I'll look into it.

[QichenZhu]

to be clear the autoFocus from the text input conflict with the blur/dismiss from the library and our component?

@mollfpr Both factors could contribute to the issue. Addressing either one will make the other take effect.

Also, why do we still need the autoFocus property for iOS even though the useAutoFocusInput also focuses on the input?

The useAutoFocusInput hook was initially introduced for the web and recently applied to the native component to address an Android issue (#45008). I'm not sure why it doesn't work on iOS, but I believe it was never intended to.

Update: The reason useAutoFocusInput doesn't work on iOS is because at first updateMultilineInputRange tries to focus the input,

App/src/libs/updateMultilineInputRange/index.ios.ts

Line 23 in 788939a

input.focus();

but fails siliently becuase at that time componentView is nullptr.

https://github.com/facebook/react-native/blob/1611a5e8a1a9a9cb7d6d9ddb4d7316d8e634e6e3/packages/react-native/React/Fabric/Mounting/RCTMountingManager.mm#L334

However, the input is optimistically marked as focused regardless,

https://github.com/facebook/react-native/blob/0705eb8b91b6c3688a73f8481c6b067899ac6eec/packages/react-native/Libraries/Components/TextInput/TextInputState.js#L62

so future attempts to programmatically focus it will be ignored.

https://github.com/facebook/react-native/blob/0705eb8b91b6c3688a73f8481c6b067899ac6eec/packages/react-native/Libraries/Components/TextInput/TextInputState.js#L106

[melvin-bot]

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

[johncschuster]

@mollfpr bump on the conversation above!

[johncschuster]

Bumped in Slack

[mollfpr]

The issue is not reproducible because we disabled auto focus for task reports recently #50544.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[QichenZhu]

I don't think the root cause has been fixed. I can still reproduce it with other steps.

Record_2024-11-02-09-13-37.mp4

[mollfpr]

@QichenZhu Thanks, I'm able to reproduce the issue with the above step.

It's still not clear to me why the issue only happens on Android, and for the solution even though it's working I feel this is like a workaround.

[QichenZhu]

@mollfpr

It's still not clear to me why the issue only happens on Android

I believe it's clear why it doesn't work on Android, isn't it?

iOS has its own issues (#50442 (comment), #51482) but it just happens to work in this senario for now. I'd love to explore more if it's a meaningful problem.

for the solution even though it's working I feel this is like a workaround

Focusing with a delay is a common solution in our repo, used in similar issues like #51010 (comment) and #51279 (comment).

[melvin-bot]

@johncschuster @mollfpr this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[johncschuster]

@mollfpr bump on the above comment!

[johncschuster]

Bump!