Expensify
[$250] [AU] Chat - Mac / Safari - Web - User details tooltip persists upon opening emoji suggestions
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: 9.0.68-2 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5279387&group_by=cases:section_id&group_id=306201&group_order=asc Issue reported by: Applause Internal Team
Action Performed:
- Navigate to https://staging.new.expensify.com/
- Log in with any account
- Open any 1:1 DM
- Send a single letter message to the chat
- Hover over your name/email
- Type ":sm" into the composer without moving the mouse
Expected Result:
User details tooltip should disappear.
Actual Result:
User details tooltip persists upon opening emoji suggestions.
Workaround:
Unknown
Platforms:
- [ ] Android: Standalone
- [ ] Android: HybridApp
- [ ] Android: mWeb Chrome
- [ ] iOS: Standalone
- [ ] iOS: HybridApp
- [ ] iOS: mWeb Safari
- [x] MacOS: Safari
- [ ] MacOS: Desktop
Screenshots/Videos
https://github.com/user-attachments/assets/5c0592c6-48ab-407e-aa56-b9fb4afe7aab
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~021863596043381250880
- Upwork Job ID: 1863596043381250880
- Last Price Increase: 2024-12-09
Issue Owner
Current Issue Owner: @eVoloshchak
Triggered auto assignment to @isabelastisser (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.
![melvin-bot[bot] avatar](https://avatars.githubusercontent.com/in/179547?v=4 "Published by a pub.dev verified publisher"){kind=small}
Job added to Upwork: https://www.upwork.com/jobs/~021863596043381250880
Triggered auto assignment to Contributor-plus team member for initial proposal review - @eVoloshchak (External)
Proposal
Please re-state the problem that we are trying to solve in this issue.
Chat - Mac / Safari - Web - User details tooltip persists upon opening emoji suggestions
What is the root cause of that problem?
The User Details tooltip uses the rootWrapperStyle style with a zIndex of 10050, which is higher than the zIndex of the emoji suggestions (which currently lacks a zIndex value). This issue also occurs with SuggestionMention component.
What changes do you think we should make in order to solve the problem?
In the AutoCompleteSuggestionsPortal/index file, add a zIndex of 10050(equal to or higher than the tooltip) to the View style.
https://github.com/Expensify/App/blob/d3d20f6582e3a85ce0f25b603b7e44c3f913102f/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx#L43
What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?
N/A
What alternative solutions did you explore? (Optional)
N/A
📣 @linhvovan29546! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:
- Make sure you've read and understood the contributing guidelines.
- Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
- Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
- Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
Format:
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>
Edited by proposal-police: This proposal was edited at 2024-12-04 08:20:53 UTC.
Proposal
Please re-state the problem that we are trying to solve in this issue.
In Safari when the user has hovered on the name and sees the tooltip with the details and at the same time tries to type in the chat; the autocomplete tooltip of the suggestions does not close the one of tthe user details and the user can see both at the same time.
What is the root cause of that problem?
The tooltip is closed when the user hovers out of the tooltip, which is triggered here: https://github.com/Expensify/App/blob/a2ad3f38b63c9fdd9b2cf5957a43e6aba4d2bd59/src/components/Tooltip/BaseTooltip/index.tsx#L111
The tooltip opens up as a portal with fixed position and a transparent overlay that takes the whole window. In the same way we have the autocomplete suggestions but with slight differences, one of them being the lack of the zIndex.
In Chrome, when the new component is added on top of the previous one the browser generates a hoverOut event because it sees that the mouse was on one div and went on another.
However, that does not work in the same way for Safari, which you can see if you add a console.log on the onHoverOut.
What changes do you think we should make in order to solve the problem?
We need to trigger the onHoverOut for Safari browsers and we can do that by dispatching a mouseover event on the AutoCompleteSuggestionsPortal when the portal is opened.
- Add a viewRef:
const viewRef = useRef<View>(null); - Add
useEffectto dispatch a mouseover event on render:
useEffect(() => {
if (!Browser.isSafari()) {
return;
}
const event = new MouseEvent('mouseover', {
bubbles: true,
cancelable: true,
view: window,
});
viewRef?.current.dispatchEvent(event);
}, []);
- Pass the
viewRefto the view in line:
https://github.com/Expensify/App/blob/a40eb994e4cad7c27147ea2dab507497ff0803e5/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx#L43
What alternative solutions did you explore? (Optional)
✅ Contributor details stored successfully. Thank you for contributing to Expensify!
Updated my proposal https://github.com/Expensify/App/issues/53320#issuecomment-2515409413 to use Browser.isSafari instead of Browser.isMobileSafari because we need to dispatch the event only for web safari.
@eVoloshchak, @isabelastisser Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@eVoloshchak, @isabelastisser Still overdue 6 days?! Let's take care of this!
@linhvovan29546, thank you for the proposal! I don't think that's the approach we should take, this doesn't close the tooltip, just makes it so suggestions composer is rendered on top of it. This means the behavior on Chrome and Safari would be different, which is not desirable
However, that does not work in the same way for Safari
@klajdipaja, let's dig a bit deeper here. Why does it not work the same way in Safari? Is this a bug or the expected behavior according to Apple?
@eVoloshchak seems like a webkit bug: https://bugs.webkit.org/show_bug.cgi?id=4117
@eVoloshchak @isabelastisser 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!
@eVoloshchak, @isabelastisser Huh... This is 4 days overdue. Who can take care of this?
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@eVoloshchak, @isabelastisser 6 days overdue. This is scarier than being forced to listen to Vogon poetry!
@eVoloshchak, @isabelastisser Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!
FYI, I will be OOO from Dec 23 to Jan 6, so please reassign the issue to another team member for urgency, IF needed.
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸
@eVoloshchak, @isabelastisser 12 days overdue now... This issue's end is nigh!
@eVoloshchak @isabelastisser this issue is now 4 weeks old, please consider:
- Finding a contributor to fix the bug
- Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
- If you have any questions, don't hesitate to start a discussion in #expensify-open-source
Thanks!
This issue has not been updated in over 14 days. @eVoloshchak, @isabelastisser eroding to Weekly issue.