[Awaiting Test from Applause] [$500] Android - Compose-In edit comment mode, compose box is shown after tapping header and returning back.

[lanitochka17]

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.15-5
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. Launch app
2. Tap on a report
3. Long press any sent message and select edit comment
4. Note, compose box is not visible
5. Tap header
6. Tap back
7. Note compose box is visible
8. Send a message

Expected Result:

When user in edit comment mode, compose box should not be shown after tapping header and returning back

Actual Result:

When user in edit comment mode, compose box shown after tapping header and returning back

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

Bug6323208_1703193415742.pppp.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~019035bbdbdc062b24
• Upwork Job ID: 1737949296231571456
• Last Price Increase: 2023-12-21
• Automatic offers:
• tienifr | Contributor | 28094075

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[ikevin127]

Proposal

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

When user is in edit comment mode, the main composer is shown after tapping header and returning back.
The issue happens on both native platforms (Android / iOS).

What is the root cause of that problem?

TLDR: As soon as the edit composer loses its focus, the main composer is being shown. When the edit composer re-gains its focus the main composer is hidden.

When we go to a different screen while the edit composer is focused, the composer loses focus which causes the main composer to be shown. If we manually re-focus the edit composer, the main composer will be hidden.

This issue happens because within ReportActionItemMessageEdit.js there's no logic that focuses the edit composer input when returning back from another screen.

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

Similar to the ComposerWithSuggestions.js component, we should add logic that focuses the edit composer input when returning from another screen to the screen where we are in edit comment mode.

Code changes

    /**
     * Focus the composer text input
     */
    const focus = focusComposerWithDelay(textInputRef.current);

    // ^ - existing code

    // new code:

    useEffect(() => {
        const unsubscribeFocus = navigation.addListener('focus', () => focus());
        return () => unsubscribeFocus();
    }, [navigation, focus]);

Videos

iOS: Native

Screen.Recording.2023-12-22.at.01.16.36.mov

Android: Native

Screen.Recording.2023-12-22.at.01.11.30.mov

[tienifr]

Proposal

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

Compose-In edit comment mode, compose box is shown after tapping header and returning back

What is the root cause of that problem?

When users focus on the edit composer, the main composer will be hidden. If they blur the edit composer, both composer will be shown. And we don't have the logic to refocus on the input if users open other page and come back

-> That why we can see 2 composers

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

Focusing on the edit composer whenever users back to report screen doesn't make sense if this composer is not focused before

We should detect if the composer is blurred when the page is not focus, so when users back to this page, we can automatically focus again

In Composer/index.ios.js

    const isFocused = useIsFocused();
    const shouldResetFocus = useRef(false);

    useEffect(()=>{
        if(!isFocused || !shouldResetFocus.current){
            return;
        }
        textInput.current?.focus(); // focus input again
        shouldResetFocus.current=false
    },[isFocused])

<RNTextInput

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

Apply the same logic in index.android.js. To avoid duplicated code we can create the new hook for that.

What alternative solutions did you explore? (Optional)

We can apply the above logic in ReportActionItemMessageEdit (edit composer) and ComposerWithSuggestions (main composer)

Result

Screen.Recording.2023-12-22.at.11.23.08.mov

[allroundexperts]

Taking over!

[allroundexperts]

Hi @tienifr!

Focusing on the edit composer whenever users back to report screen doesn't make sense if this composer is not focused before

Can you show me a video of this happening?