[HOLD #35572] [$500] Chat - Keyboard not dismissed after tapping flag as offensive in thread

[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: 1.4.40-0
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: Applause internal team
Slack conversation:

Action Performed:

1. Open the app and log in
2. Navigate to any chat
3. Long tap the other user's comment
4. Select "Reply in thread"
5. Send a message in the thread
6. Long tap the parent message
7. Select "Flag as offensive"

Expected Result:

The keyboard is dismissed shortly after the Flag as offensive screen is opened

Actual Result:

The keyboard is not dismissed

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

Add any screenshot/video evidence

Bug6377219_1707770654836.RPReplay_Final1707760252.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019d72fa1fa48fb3a5
• Upwork Job ID: 1757146714590474240
• Last Price Increase: 2024-02-19

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[m-natarajan]

We (Applause) think this might be related to #vip-vsb
cc @quinthar

[allgandalf]

Proposal

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

Chat - Keyboard not dismissed after tapping flag as offensive in thread

What is the root cause of that problem?

In the parent component Composer, we don't dismiss the keyboard when we lose focus from the input text:

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

Lines 87 to 92 in 5aee9a3

	onBlur={(e) => {
	if (!isFocused) {
	shouldResetFocus.current = true; // detect the input is blurred when the page is hidden
	}
	props?.onBlur?.(e);
	}}

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

Call Keyboard.dismiss(); in the Composer to dismiss the keyboard whenever we lose the focus from the keyboard:

onBlur={(e) => {
                if (!isFocused) {
                    shouldResetFocus.current = true; // detect the input is blurred when the page is hidden
                }
                props?.onBlur?.(e);
                Keyboard.dismiss(); // Dismiss keyboard on blur
            }}

What alternative solutions did you explore? (Optional)

If we don't want to play with Composer then simply in ReportActionCompose :

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

Line 419 in 5aee9a3

<ComposerWithSuggestions

Add the Keyboard.dismiss() call in :

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

Line 303 in 5aee9a3

const onBlur = useCallback((e) => {

[ikevin127]

Proposal

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

The keyboard is not dismissed after tapping Flag as offensive from the thread context menu.

What is the root cause of that problem?

This is a known issue of our modal implementation vs composer refocus / keyboard, more details can be found here.

Clicking "Flag as offensive" in the context menu calls navigate to the FlagCommentPage, but the composer regains focus when the menu closes, causing the keyboard to pop up and when navigate is called the keyboard will remain open once navigated to the FlagCommentPage (where we don't actually need a keyboard).

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

As I mentioned in another similar issue's proposal here, a workaround would look something like this:

• create a delayExecution helper function which uses promise that resolves with a delay (we need the delay as calling composer blur immediately after the menu closes wouldn't work)
• use this function by calling composer blur (unfocus) after the menu closes with given delay
• in the 2nd then of the promise call the current navigate to the FlagCommentPage

Code spoiler

// new util function w/ default 300ms delay
function delayExecution(timeout = CONST.ANIMATED_TRANSITION): Promise<void> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        }, timeout);
    });
}

// to be used like this in our case:
delayExecution().then(() => {
    ReportActionComposeFocusManager.composerRef.current?.blur();
}).then(() => {
    Navigation.navigate(ROUTES.FLAG_COMMENT.getRoute(reportID, reportAction?.reportActionID))
});

Good thing about this solution: composer refocuses / keyboard pops back up when going back from the FlagCommentPage to the thread or choosing one of the flag options which also returns the user back to the thread (see After video).

We can use this helper function within the onPress -> hideContextMenu of the "Flag as offensive" context menu action:

App/src/pages/home/report/ContextMenu/ContextMenuActions.tsx

Line 459 in 07d97ef

onPress: (closePopover, {reportID, reportAction}) => {

just like demonstrated within the Code spoiler above.

This will ensure that the composer is blurred (unfocused) when the "Flag as offensive" context menu action is called and the keyboard will be dismissed before we are navigated to the FlagCommentPage.

Videos

iOS: Native

Before	After
Screen.Recording.2024-02-13.at.18.33.11.mov	Screen.Recording.2024-02-13.at.19.38.00.mov

What alternative solutions did you explore? (Optional)

Put issue on hold and wait (indefinitely) for PR #29199 to be merged as this will add better context menu actions / composer focus state management which will allow us to better handle these kind of composer focus / keyboard issues.