[Due for payment 2025-02-19] [$250] Web - Compose box - Expand collapse tooltip not dismissed after clicking

[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: v9.0.92-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Applause Internal Team
Device used: Windows 11/ Chrome
App Component: Chat Report View

Action Performed:

1. Sign in to staging.new.expensify.com
2. Navigate to a conversation
3. Insert text in compose box until expand arrow is displayed
4. Hover and Click on "Expand" arrow
5. After expanding compose box, hover and click on "Collapse" arrow

Expected Result:

After clicking both expand and collapse arrows, tooltip is dismissed.

Actual Result:

After clicking both expand and collapse arrows, tooltip is not dismissed both times.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6728217_1738217914233.bandicam_2025-01-30_09-08-06-129.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021886888179679387363
• Upwork Job ID: 1886888179679387363
• Last Price Increase: 2025-02-04
• Automatic offers:
• linhvovan29546 | Contributor | 106072159

Issue Owner

Current Issue Owner: @muttmuure

[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.

[linhvovan29546]

Proposal

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

Web - Compose box - Expand collapse tooltip not dismissed after clicking

What is the root cause of that problem?

In AttachmentPickerWithMenuItems, we have two tooltips: collapse and expand.

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

Line 293 in c3b2f3a

<Tooltip text={translate('reportActionCompose.collapse')}>

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

Line 314 in c3b2f3a

<Tooltip text={translate('reportActionCompose.expand')}>

The issue occurs because the tooltip does not unmount when switching between expand and collapse. As a result, the tooltip remains open and does not dismiss properly. You can track this behavior in the ActiveHoverable file.

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

We should ensure the tooltip components are treated as distinct elements by adding a key to each tooltip

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

Line 293 in c3b2f3a

<Tooltip text={translate('reportActionCompose.collapse')}>

to

<Tooltip text={translate('reportActionCompose.collapse')} key="collapse">

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

Line 314 in c3b2f3a

<Tooltip text={translate('reportActionCompose.expand')}>

to

   <Tooltip text={translate('reportActionCompose.expand')} key="expand">

Result

Screen.Recording.2025-01-30.at.6.16.00.PM.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A, UI bug

What alternative solutions did you explore? (Optional)

N/A
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@muttmuure Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[melvin-bot]

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

[huult]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-05 14:46:32 UTC.

Proposal

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

Expand collapse tooltip not dismissed after clicking

What is the root cause of that problem?

The tooltip remains in the DOM even when switching between ‘Expand’ and ‘Collapse,’ so the onHoverOut event is not executed to hide the tooltip, causing this issue to occur

App/src/components/Tooltip/BaseTooltip/index.tsx

Line 111 in b5090b9

onHoverOut={hideTooltip}

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

To resolve this issue, we need to update the way we render collapse/expand so that it can unmount properly, like this:

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

Lines 294 to 336 in efaa20c

	{isComposerFullSize ? (
	<Tooltip text={translate('reportActionCompose.collapse')}>
	<PressableWithFeedback
	onPress={(e) => {
	e?.preventDefault();
	raiseIsScrollLikelyLayoutTriggered();
	setIsComposerFullSize(reportID, false);
	}}
	// Keep focus on the composer when Collapse button is clicked.
	onMouseDown={(e) => e.preventDefault()}
	style={styles.composerSizeButton}
	disabled={isBlockedFromConcierge || disabled}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={translate('reportActionCompose.collapse')}
	>
	<Icon
	fill={theme.icon}
	src={Expensicons.Collapse}
	/>
	</PressableWithFeedback>
	</Tooltip>
	) : (
	<Tooltip text={translate('reportActionCompose.expand')}>
	<PressableWithFeedback
	onPress={(e) => {
	e?.preventDefault();
	raiseIsScrollLikelyLayoutTriggered();
	setIsComposerFullSize(reportID, true);
	}}
	// Keep focus on the composer when Expand button is clicked.
	onMouseDown={(e) => e.preventDefault()}
	style={styles.composerSizeButton}
	disabled={isBlockedFromConcierge || disabled}
	role={CONST.ROLE.BUTTON}
	accessibilityLabel={translate('reportActionCompose.expand')}
	>
	<Icon
	fill={theme.icon}
	src={Expensicons.Expand}
	/>
	</PressableWithFeedback>
	</Tooltip>
	)}

Update to

      {isComposerFullSize ? (
        <Tooltip text={translate('reportActionCompose.collapse')}>
            <PressableWithFeedback
                onPress={(e) => {
                    e?.preventDefault();
                    raiseIsScrollLikelyLayoutTriggered();
                    setIsComposerFullSize(reportID, false);
                }}
                // Keep focus on the composer when Collapse button is clicked.
                onMouseDown={(e) => e.preventDefault()}
                style={styles.composerSizeButton}
                disabled={isBlockedFromConcierge || disabled}
                role={CONST.ROLE.BUTTON}
                accessibilityLabel={translate('reportActionCompose.collapse')}
            >
                <Icon
                    fill={theme.icon}
                    src={Expensicons.Collapse}
                />
            </PressableWithFeedback>
        </Tooltip>
    ) : null}

    {!isComposerFullSize ? (
        <Tooltip text={translate('reportActionCompose.expand')}>
            <PressableWithFeedback
                onPress={(e) => {
                    e?.preventDefault();
                    raiseIsScrollLikelyLayoutTriggered();
                    setIsComposerFullSize(reportID, true);
                }}
                // Keep focus on the composer when Expand button is clicked.
                onMouseDown={(e) => e.preventDefault()}
                style={styles.composerSizeButton}
                disabled={isBlockedFromConcierge || disabled}
                role={CONST.ROLE.BUTTON}
                accessibilityLabel={translate('reportActionCompose.expand')}
            >
                <Icon
                    fill={theme.icon}
                    src={Expensicons.Expand}
                />
            </PressableWithFeedback>
        </Tooltip>
    ) : null}

Screen.Recording.2025-02-05.at.13.10.03.mov

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

To resolve this issue, we need to temporarily remove the tooltip before toggling and re-render it with updated content after interactions finish. Some thing like this:

    {isComposerFullSize ? (
        <Tooltip
            text={translate('reportActionCompose.collapse')}
            shouldRender={isShow}
        >
            <PressableWithFeedback
                onPress={(e) => {
                    setIsShow(false);
                    ...
                    InteractionManager.runAfterInteractions(() => {
                        setIsShow(true);
                    });
                }}
                ...
            >
                ...
            </PressableWithFeedback>
        </Tooltip>
    ) : (
        <Tooltip
            text={translate('reportActionCompose.expand')}
            shouldRender={isShow}
        >
            <PressableWithFeedback
                onPress={(e) => {
                    setIsShow(false);
                    ...
                    InteractionManager.runAfterInteractions(() => {
                        setIsShow(true);
                    });
                }}
                ...
            >
                ...
            </PressableWithFeedback>
        </Tooltip>
    )}

Test branch

[melvin-bot]

@rojiphil, @muttmuure Huh... This is 4 days overdue. Who can take care of this?

[rojiphil]

Reviewing today

[rojiphil]

Thanks @linhvovan29546 @huult for the proposals. Both proposals would solve the problem.

However, @linhvovan29546 proposal LGTM i.e. adding key to make the tooltip components distinct. But I think it is better to add context specific key value (e.g. composer-expand/composer-collapse instead of generic collapse/expand. Also, this was the first proposal to identify the root cause.
🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @linhvovan29546 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.97-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: expand and collapse tooltip not dissmissed #56637

If no regressions arise, payment will be issued on 2025-02-19. 🎊

For reference, here are some details about the assignees on this issue:

• @rojiphil requires payment through NewDot Manual Requests
• @linhvovan29546 requires payment automatic offer (Contributor)

[melvin-bot]

@rojiphil @muttmuure @rojiphil The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[melvin-bot]

@rojiphil @luacmartins @muttmuure @linhvovan29546 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!

[luacmartins]

PR is merged

[muttmuure]

Heading out on leave - adding auto-assigner

[melvin-bot]

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

[abekkala]

@muttmuure Reviewing this one now to add some status info of where this is at (it's tough being thrown onto a bug issue - a quick summary is helpful!)

[abekkala]

CURRENT STATUS:

Fix has been chosen and PR created
Deployed to production 2 days ago (Feb 12)

PAYMENT SUMMARY FOR FEB 19

Fix: @linhvovan29546 [$250, if no regressions] Offer
PR Review: @rojiphil [$250, if no regressions] payment via NewDot

[muttmuure]

Sorry! Thanks for taking it

[muttmuure]

Just waiting to be paid out- you got it

[melvin-bot]

@rojiphil, @abekkala, @luacmartins, @linhvovan29546 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[rojiphil]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: Not required as this is an improvement

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: Not Required. The existing checklist is good enough to capture such issues.

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal

Precondition:

Test:

1. Navigate to a Chat/Workspace Report
2. Insert a long text in compose box until Expand arrow icon is displayed.
3. Hover over the Expand arrow and verify that the tooltip is displayed.
4. Click on the Expand arrow icon to enlarge the compose box so that Collapse arrow is displayed.
5. Verify that the tooltip is dismissed. (Test 1)
6. Hover over the Collapse arrow icon and verify that the tooltip is displayed
7. Click on the Collapse arrow icon to collapse the compose box.
8. Verify that the tooltip is dismissed (Test 2)

Do we agree 👍 or 👎

[abekkala]

@linhvovan29546 upwork payment sent and contract ended - thank you! 🎉

@rojiphil, your $250 payment will be made via NewDot - thank you! 🎉