[$250] Android - Chat - Unable to close keyboard by tapping outside of it

[IuliiaHerets]

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.67-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Open the Expensify app.
2. Open any chat that has messages on it.
3. Tap on compose box to open keyboard.
4. Tap outside the keyboard area to close it.
5. Verify that the keyboard is closed when tapping outside of it.

Expected Result:

Keyboard should be closed when tapping outside of it.

Actual Result:

Keyboard is not closed when tapping outside of it in chats that already have messages. Keyboard closes normally when the chat doesn´t have any message or content on it.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6677688_1732684892160.Tap_Keyboard.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021861915865037036576
• Upwork Job ID: 1861915865037036576
• Last Price Increase: 2024-11-27

Issue Owner

Current Issue Owner: @alitoshmatov

[melvin-bot]

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

[gadhiyamanan]

Proposal

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

keyboard does not close on Tap outside the keyboard

What is the root cause of that problem?

we are using keyboardShouldPersistTaps="handled" props in ReportActionsList.tsx because of that keyboard will not dismiss automatically on Tap outside the keyboard

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

Lines 732 to 756 in c62ab78

	<InvertedFlatList
	accessibilityLabel={translate('sidebarScreen.listOfChatMessages')}
	ref={reportScrollManager.ref}
	testID="report-actions-list"
	style={styles.overscrollBehaviorContain}
	data={sortedVisibleReportActions}
	renderItem={renderItem}
	contentContainerStyle={contentContainerStyle}
	keyExtractor={keyExtractor}
	initialNumToRender={initialNumToRender}
	onEndReached={onEndReached}
	onEndReachedThreshold={0.75}
	onStartReached={onStartReached}
	onStartReachedThreshold={0.75}
	ListFooterComponent={listFooterComponent}
	ListHeaderComponent={listHeaderComponent}
	keyboardShouldPersistTaps="handled"
	onLayout={onLayoutInner}
	onContentSizeChange={onContentSizeChangeInner}
	onScroll={trackVerticalScrolling}
	onScrollToIndexFailed={onScrollToIndexFailed}
	extraData={extraData}
	key={listID}
	shouldEnableAutoScrollToTopThreshold={shouldEnableAutoScrollToTopThreshold}
	/>

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

we can use keyboardShouldPersistTaps="never" in ReportActionsList.tsx or remove keyboardShouldPersistTaps prop because by default the value of keyboardShouldPersistTaps is never

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

👋 @gadhiyamanan , it's been a minute!
@alitoshmatov , plz attempt reproduction. If you're able to repro, please review Manan's proposal. I won't be able to test on Android til I'm back in the bank on Monday.

[huult]

Edited by proposal-police: This proposal was edited at 2024-11-28 04:11:57 UTC.

Proposal

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

Unable to close keyboard by tapping outside of it

What is the root cause of that problem?

We are using keyboardShouldPersistTaps with the value handled, but with this setup, we are unable to hide the keyboard when tapping outside

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

Line 748 in 9909d61

keyboardShouldPersistTaps="handled"

'handled', the keyboard will not dismiss automatically when the tap was handled by a children, (or captured by an ancestor).
false, deprecated, use 'never' instead
true, deprecated, use 'always' instead

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

To resolve this issue and avoid impacting the current logic and behavior, we should handle the onPress event of ReportActionItem to dismiss the keyboard. Something like this:

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

Line 162 in 0b97bde

<ReportActionItem

// src/pages/home/report/ReportActionsListItemRenderer.tsx#L162
    <ReportActionItem
        shouldHideThreadDividerLine={shouldHideThreadDividerLine}
        parentReportAction={parentReportAction}
        report={report}
        transactionThreadReport={transactionThreadReport}
        parentReportActionForTransactionThread={parentReportActionForTransactionThread}
        action={action}
        reportActions={reportActions}
        linkedReportActionID={linkedReportActionID}
        displayAsGroup={displayAsGroup}
        shouldDisplayNewMarker={shouldDisplayNewMarker}
        shouldShowSubscriptAvatar={
            (ReportUtils.isPolicyExpenseChat(report) || ReportUtils.isInvoiceRoom(report)) &&
            [
                CONST.REPORT.ACTIONS.TYPE.IOU,
                CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW,
                CONST.REPORT.ACTIONS.TYPE.SUBMITTED,
                CONST.REPORT.ACTIONS.TYPE.APPROVED,
                CONST.REPORT.ACTIONS.TYPE.FORWARDED,
            ].some((type) => type === reportAction.actionName)
        }
        isMostRecentIOUReportAction={reportAction.reportActionID === mostRecentIOUReportActionID}
        index={index}
        isFirstVisibleReportAction={isFirstVisibleReportAction}
        shouldUseThreadDividerLine={shouldUseThreadDividerLine}
+        onPress={() => {
+            Keyboard.dismiss();
+        }}
    />

POC

Screen.Recording.2024-11-28.at.11.07.51.mov

Note: For similar cases like this issue, we can reuse this solution

What alternative solutions did you explore? (Optional)