[$500] IOU - Incorrect Tooltip Position Displayed When Hovering over Email

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Click on the plus sign and select "Request Money."
2. Enter the desired amount and email address for the money request
3. Navigate to the IOU section by double-clicking on the requested money, write a message, and delete the requested money
4. Go back twice and hover over the email, observing that the tooltip position is displayed at the bottom of the email

Expected Result:

When hovering over the email, the corresponding email should be displayed in the tooltip located above the email

Actual Result:

When hovering over our account email in the IOU, it incorrectly displays the tooltip position at the bottom of the email instead of above it

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• Windows / Chrome
• MacOS / Desktop

Version Number: 1.3.57-5

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Notes/Photos/Videos: Any additional supporting documentation

screen-capture.-.2023-08-19T034155.410.webm

Gravar.3003.mp4

Expensify/Expensify Issue URL:

Issue reported by: @tewodrosGirmaA

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692441282411909

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01555ca5159a05db42
• Upwork Job ID: 1699605757765820416
• Last Price Increase: 2023-09-07
• Automatic offers:
• s77rt | Reviewer | 26612491
• tienifr | Contributor | 26612495
• tewodrosGirmaA | Reporter | 26612498

[melvin-bot]

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

[AmjedNazzal]

@JmillsExpensify I don't know if this is as much of a tooltip bug as it is just the notification acting a bit strange and the tooltip calculation responding to it, at least the tooltip behaves correctly when it shows up under the email when there is a notification border above as it shouldn't cross that and it behaves incorrectly when at first it shows over the border before leaving the report and coming back to it. can we kindly get some clarification on if the bug is the tooltip going over the new message border or going underneath it? thank you!

Screen.Recording.2023-08-28.at.10.58.58.PM.mov

[melvin-bot]

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

[melvin-bot]

@JmillsExpensify 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[JmillsExpensify]

Low value bug though triaging in any case for consistency.

[melvin-bot]

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

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[tienifr]

Proposal

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

Tooltip is displayed below instead of above hovered email when there's unread indicator above it.

What is the root cause of that problem?

After the money request was deleted, an unread indicator would be shown above the report action item.

This function checks if there's an overlapping element above the tooltip target element (i.e., email):

App/src/styles/getTooltipStyles.js

Line 73 in b119f9a

function isOverlappingAtTop(xOffset, yOffset, tooltip, tooltipTargetWidth, tooltipTargetHeight) {

which gets the element at that coordinate using:

App/src/styles/getTooltipStyles.js

Line 81 in b119f9a

const elementAtTargetCenterX = document.elementFromPoint(targetCenterX, yOffset);

In this case, the unread indicator was returned which was misunderstood as an overlapping element.

This issue also happens on the top-left avatar in that report action item.

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

UnreadActionIndicator should not be treated as an overlapping element.

Add pointer-events: none to the UnreadActionIndicator element as explained in the official document.

What alternative solutions did you explore? (Optional)

None

[s77rt]

@tienifr Thanks for the proposal. Your RCA makes sense but seeing that this is a regression from #20240 it may be better to just revert that PR, the issue that the PR is fixing seems no longer reproducible. I asked here for confirmation.

[s77rt]

After checking I think it's easier and safer to keep the overlapping logic untouched and just ignore the unread indicator as @tienifr suggested especially since it's a decoration only element.

🎀 👀 🎀 C+ reviewed
Link to proposal

[melvin-bot]

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

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @tienifr 🎉 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]

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

Offer link
Upwork job

[tienifr]

PR ready for review #27171.

[melvin-bot]

🎯 ⚡️ Woah @s77rt / @tienifr, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @tienifr got assigned: 2023-09-11 15:23:47 Z
• when the PR got merged: 2023-09-13 21:46:25 UTC

On to the next one 🚀

[tienifr]

@s77rt @JmillsExpensify This one has been deployed to production 10 days ago but I haven't seen Melvin's BZ checklist reminder. As the regression period is over, I think we can wrap this up here. Thanks!

[s77rt]

• The PR that introduced the bug has been identified: Show tooltip below as soon as another element overlap the top edge #20240
• The offending PR has been commented on: Show tooltip below as soon as another element overlap the top edge #20240 (comment)
• A discussion in #expensify-bugs has been started: Not needed for this case
• Determine if we should create a regression test for this bug: No

[tienifr]

@JmillsExpensify I think we're good to wrap this up. Also seems like Melvin has forgot about this issue 😢 .

[tienifr]

@JmillsExpensify can you take a look above ^? We're 20 days from production deployment.

[JmillsExpensify]

Thanks yes, Melvin failed to update the title.

Payment summary:

• Issue reporter: @tewodrosGirmaA $250 (reported before 25 Aug)
• Contributor: @tienifr $1,000 (incl. urgency bonus)
• Contributor+: @s77rt $1,000 (incl. urgency bonus)

[JmillsExpensify]

All paid out, no regression tests needed.

[s77rt]

@JmillsExpensify The total is $750. I have refunded the $250.