-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[$250] mWeb - Chat - Tooltip appears below composer after returning from "Go back to home page" link #55114
Comments
Triggered auto assignment to @johncschuster ( |
Edited by proposal-police: This proposal was edited at 2025-01-11 12:50:26 UTC. ProposalPlease re-state the problem that we are trying to solve in this issue.mWeb - Chat - Tooltip appears below composer after returning from "Go back to home page" link What is the root cause of that problem?When returning from another link, the
The issue arises from the calculation based on elementAtTargetCenterX . When navigating to another link, the point at targetCenterX becomes inaccurate.App/src/styles/utils/generators/TooltipStyleUtils/isOverlappingAtTop/index.ts Lines 31 to 42 in 4491e85
What changes do you think we should make in order to solve the problem?We can easily fix this by introducing a new prop App/src/styles/utils/generators/TooltipStyleUtils/index.ts Lines 129 to 133 in 4491e85
if (!shouldForceRenderingTop) {
shouldShowBelow =
(shouldForceRenderingBelow ||
yOffset - tooltipHeight - POINTER_HEIGHT < GUTTER_WIDTH + titleBarHeight ||
!!(tooltip && isOverlappingAtTop(tooltip, xOffset, yOffset, tooltipTargetWidth, tooltipTargetHeight)) ||
anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP) && shouldForceRenderingBelow;
} And set <EducationalTooltip
...
shouldForceRenderingTop // new code
> POC
What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?No, UI bug What alternative solutions did you explore? (Optional)After spending some time looking into the issue here, I can confirm that this proposal also resolves the issue. |
ProposalPlease re-state the problem that we are trying to solve in this issue.Composer tooltip shows below the composer after going back from not found page. What is the root cause of that problem?When we go to the not found page, the tooltip isn't rendered. When we go back, the tooltip is rendered again and recalculates the position. App/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx Lines 429 to 430 in fb487a5
However, App/src/styles/utils/generators/TooltipStyleUtils/index.ts Lines 129 to 133 in fb487a5
App/src/styles/utils/generators/TooltipStyleUtils/isOverlappingAtTop/index.ts Lines 30 to 44 in fb487a5
In our case, the overlapping element is the not found page. It's because while the page is closing, the calculation is happening. What changes do you think we should make in order to solve the problem?We need to wait until the page is fully closed. We can't use transitionEnd event because it's not fired. We can follow the doc by using InteractionManager.
Then update the shouldRender condition to only show if transition ends. App/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx Lines 429 to 430 in fb487a5
We can create a useIsFullyFocused hook if needed. What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?N/A |
ProposalPlease re-state the problem that we are trying to solve in this issue.Tooltip appears below composer after returning from "Go back to home page" link What is the root cause of that problem?This issue occurs because we calculate the x-center position of the target before the compose box has finished rendering
For this reason, the calculated value for
What changes do you think we should make in order to solve the problem?This issue can occur in other cases with similar conditions. To fix this, we should update the logic to calculate App/src/styles/utils/generators/TooltipStyleUtils/isOverlappingAtTop/index.ts Lines 23 to 45 in f6c3290
Update to: const isOverlappingAtTop: IsOverlappingAtTop = (tooltip, xOffset, yOffset, tooltipTargetWidth, tooltipTargetHeight) => {
if (typeof document.elementFromPoint !== 'function') {
return false;
}
// Use the x center position of the target to prevent wrong element returned by elementFromPoint
// in case the target has a border radius or is a multiline text.
const targetCenterX = xOffset + tooltipTargetWidth / 2;
const elementAtTargetCenterX = document.elementFromPoint(targetCenterX, yOffset);
// Ensure it's not the already rendered element of this very tooltip, so the tooltip doesn't try to "avoid" itself
if (!elementAtTargetCenterX || ('contains' in tooltip && tooltip.contains(elementAtTargetCenterX))) {
return false;
}
const rectAtTargetCenterX = elementAtTargetCenterX.getBoundingClientRect();
let isOverlappingAtTargetCenterX = false; // add this line
requestAnimationFrame(() => { // add this line
isOverlappingAtTargetCenterX = yOffset > rectAtTargetCenterX.top && yOffset < rectAtTargetCenterX.bottom && yOffset + tooltipTargetHeight > rectAtTargetCenterX.bottom; // add this line
}); // add this line
// Ensure it's not overlapping with another element by checking if the yOffset is greater than the top of the element
// and less than the bottom of the element. Also ensure the tooltip target is not completely inside the elementAtTargetCenterX by vertical direction
return isOverlappingAtTargetCenterX;
}; POCScreen.Recording.2025-01-13.at.22.48.52.movWhat specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?This is a UI bug; no tests are needed. 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. |
Job added to Upwork: https://www.upwork.com/jobs/~021878937549151677268 |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr ( |
@johncschuster, @mollfpr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues! |
@linhvovan29546 What is the cause of the inaccuracy? Also, I'm not onboard yet with the workaround solution.
@bernhardoj I also found the same issue on the desktop web with smallscreen when try pasting the text. Is this the same root cause? Screen.Recording.2025-01-20.at.18.07.17.mp4
@huult Same question with the issue of pasting the text. Simulator.Screen.Recording.-.iPhone.15.17.2.-.2025-01-20.at.18.20.57.mov |
@mollfpr The RCA is the same as described here: #54925 (comment). This issue may be resolved by the selected proposal mentioned here. #54924 (comment) |
@linhvovan29546 You're RCA mentioned that the inaccuracy happened on screen transition. How about this issue? There's no screen transition and the compose box is already rendered. Screen.Recording.2025-01-20.at.18.07.17.mp4 |
@linhvovan29546 Even the |
Yes, my RCA is outdated
The tooltip style re-render too soon, as the layout isn’t fully ready (navigation, parent layout change, etc...) |
@mollfpr Yes, it looks like the same RCA, and applying my solution will fix it. Screen.Recording.2025-01-20.at.22.31.46.mov |
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸 |
@mollfpr it's a different RCA. For the pasting case, it overlaps with the composer content instead. It's simply because the yOffset is never updated.
yOffset is the y position of the composer, but it's never updated even when the composer is expanded. a.mp4It will be fixed by #54924 Btw, somehow I can't repro this issue anymore. (it's still overlapping with not found page, but isOverlappingAtTop is false) |
@johncschuster, @mollfpr Uh oh! This issue is overdue by 2 days. Don't forget to update your issues! |
@johncschuster @mollfpr 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! |
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸 |
@johncschuster, @mollfpr 6 days overdue. This is scarier than being forced to listen to Vogon poetry! |
@mollfpr bump on the comment above! |
Sorry for the delay, I miss the notification 🙏
@huult, it doesn't solve the position of the text changes in the composer. Also, why should we delay the execution with Screen.Recording.2025-01-29.at.20.37.42.mp4 |
📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸 |
@johncschuster, @mollfpr Eep! 4 days overdue now. Issues have feelings too... |
Your tested case has a different RCA than this issue and may be related to #54924.
We can use |
@johncschuster, @mollfpr Still overdue 6 days?! Let's take care of this! |
@mollfpr bump on the above! |
Okay, the issue on pasting text might be related to #54924. I'm more inclined into solution from @bernhardoj because it's more reasonable to render the tooltip after the transition ends. 🎀👀🎀 C+ reviewed |
Triggered auto assignment to @grgia, see https://stackoverflow.com/c/expensify/questions/7972 for more details. |
Thanks for your proposal @bernhardoj, assigned |
@mollfpr could you review my feedback and my proposal? |
PR is ready cc: @mollfpr |
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.84-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp #54869
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max / iOS 18.2
App Component: Chat Report View
Action Performed:
Expected Result:
The educational tooltip should appear above the composer.
Actual Result:
The educational tooltip appears below the composer.
Workaround:
Unknown
Platforms:
Screenshots/Videos
Bug6711604_1736574805440.ScreenRecording_01-11-2025_13-28-55_1.mp4
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @mollfprThe text was updated successfully, but these errors were encountered: