[$250] Mac/Safari - Expenses - When hovering over the actionable whisper option, the wrong option is highlighted

[IuliiaHerets]

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: v9.0.78-1
Reproducible in staging?: Yes
Reproducible in production?: No
Issue reported by: Applause Internal Team
Device used: Mac 14.6.1/Safari
App Component: Money Requests

Action Performed:

1.Navigate to https://staging.new.expensify.com
2.Navigate to the Self DM
3. Track a manual expense
4. Hover over the actionable whisper options

Expected Result:

The correct option is highlighted

Actual Result:

When hovering over the actionable whisper option of a track expense, the wrong option is highlighted or the field isn't highlighted at all.
Issue happens only Safari browser.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6701663_1735020194710.Recording__286.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021871611845625259597
• Upwork Job ID: 1871611845625259597
• Last Price Increase: 2025-01-07

Issue Owner

Current Issue Owner: @rinej

Issue Owner

Current Issue Owner: @rinej

[melvin-bot]

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

[Christinadobrzyn]

I just added more to the OP - it looks like either the entire field of whispers is highlighted or the fields aren't selected.

2024-12-24_10-37-12.mp4

[Christinadobrzyn]

I think this can be external

[melvin-bot]

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

[melvin-bot]

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

[techievivek]

Removing the DeployBlocker label since this is already sent to external.

[Christinadobrzyn]

waiting on proposals

[rdipippo]

I can't reproduce this either.

…

On Sat, Dec 28, 2024 at 12:58 PM Christina Dobrzynski < ***@***.***> wrote: waiting on proposals — Reply to this email directly, view it on GitHub <#54520 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABO7HSOLVK4Y5R4ZZQEIP6D2H3REBAVCNFSM6AAAAABUET7MJ6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNRUGM4TCMRXGY> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Christinadobrzyn]

Testing again, this does seem to be resolved. Asking QA to test again -https://expensify.slack.com/archives/C9YU7BX5M/p1735597477414199

[kavimuru]

Still reproducible

Recording.319.mp4

[jayeshmangwani]

I can also reproduce this issue on Safari.

hover-bug.mov

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[Christinadobrzyn]

Ah okay thanks for testing. I updated the OP indicating this is only happening in Safari. We're waiting for proposals

[melvin-bot]

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

[jayeshmangwani]

Waiting on proposals!

[Christinadobrzyn]

Checking to see if SWM might be able to take this. https://expensify.slack.com/archives/C04878MDF34/p1736201512710459

[melvin-bot]

@jayeshmangwani @Christinadobrzyn 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!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[Christinadobrzyn]

I'll ping again for someone at SWM to grab this in the am.

[Christinadobrzyn]

SWM is at full capacity. I'll reach out in the in open source to see if someone would have the bandwidth to provide a proposal. https://expensify.slack.com/archives/C01GTK53T8Q/p1736352060338919

[rinej]

Hello, I am Tomek from callstack, I would like to work on that issue :)

[Christinadobrzyn]

Oh amazing! Thank you @rinej! I'll add you!

[rinej]

I was able to reproduce it on dev environment, working on the fix :)

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot]

@rinej, @jayeshmangwani, @Christinadobrzyn Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[jayeshmangwani]

Issue not reproducible during KI retests. (First week)

Issue is reproducible for me on latest version, and @rinej is working on the fix

[Christinadobrzyn]

@rinej can you provide an update when you have a moment? TY!

[melvin-bot]

@rinej, @jayeshmangwani, @Christinadobrzyn Huh... This is 4 days overdue. Who can take care of this?

[rinej]

Sure!
It’s very likely that some event handlers in ActiveHoverable.tsx behave differently on Safari browsers.
Also, I suspect that references to the hoverable elements are not updating correctly on Safari. I’m currently verifying both of these issues.

[rinej]

Here is the for solving the issue:

Problem
When hovering over the actionable "Whisper" option of a track expense, the wrong option is highlighted, or the field does not get highlighted at all. This issue occurs only in the Safari browser.

Solution
This behaviour may be related to how Safari handles certain events, particularly in scenarios with nested hoverable components.
To address this issue in Safari, the component should be refreshed after rendering. It ensures that all references are properly updated. This fix will be applied conditionally for Safari only, as the existing logic functions correctly in all other browsers.

BEFORE:

Bug.mp4

AFTER:

Fixed.mp4

[rinej]

Here is the PR with the proposed changes -> #55350