mirror of
https://github.com/actualbudget/actual.git
synced 2026-03-09 03:32:54 -05:00
[Bug]: Overspending / Transfer Funds pop-up gets covered with second pop-up. #2099
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: github-starred/actual#2099
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Originally created by @gitchap on GitHub (May 5, 2025).
Verified issue does not already exist?
What happened?
When clicking on category balance to cover overspending / move money, the pop-up dialog gets covered by a second pop-up when there is a template / goal, and you stay hovered on the amount for a second or so.
This can be avoided by clicking and immediately moving the pointer off the total amount, or by waiting 1+ second to let the template / goal pop-up happen before you click. But this is not ideal.
If the transfer / overspending pop-up is already up, the template / goal pop-up should either not show, or show up behind the first.
How can we reproduce the issue?
Click on a category balance that has a template or a goal immediately after moving your pointer over it. Then pause for a second without moving the pointer and see the new pop-up cover the first.
Where are you hosting Actual?
Docker
What browsers are you seeing the problem on?
Chrome
Operating System
Windows 11
@gitchap commented on GitHub (May 5, 2025):
Thinking about it some more, I wouldn't mind if the information from both pop-ups were combined, and only showed on click.
@youngcw commented on GitHub (May 6, 2025):
Combining the popups would be a good way to do it since that is how it works on mobile already
@dangrous commented on GitHub (May 21, 2025):
I'm hoping to have time to take a stab at this one this weekend! Combining makes sense to me
@Johnn27 commented on GitHub (May 24, 2025):
I've taken a look, and the visual overlap between the tooltip and the popover menu does create a confusing experience.
I believe the most direct way to solve this for the desktop UI is to explicitly disable the tooltip when its related context menu (the Popover) is active. This could be done by:
tooltipDisabled, to theBalanceWithCarryovercomponent.ExpenseCategoryMonth, we would passtrueto thistooltipDisabledprop for theBalanceWithCarryoverinstance, effectively hiding the tooltip.This targeted approach directly fixes the "double popup" issue.
An alternative might be to refactor the content currently displayed in the tooltip (
GoalStatusDisplay) into a new, separate, reusable component. This new component could then be used by both theTooltipinBalanceWithCarryoverand potentially within theBalanceMovementMenuPopover. While this could promote reusability, it would involve more significant changes:* Extracting the
GoalStatusDisplaylogic and JSX into a new component file.* Modifying
BalanceWithCarryoverto use this new component.* Fetching the necessary data (balance, goal, budget values etc.) in
ExpenseCategoryMonthand passing it down toBalanceMovementMenu, which would then pass it to the new shared component.* Adjusting
BalanceMovementMenuto incorporate and display this new component.This refactoring would be a larger undertaking with more touchpoints across the codebase. Given that the primary issue here is the UI conflict and considering the mobile UI has different patterns (often using modals where this specific overlap isn't an issue), the simpler prop-based solution seems more pragmatic and proportionate for this specific bug.
I'll focus on implementing the
tooltipDisabledprop solution for the PR.@Johnn27 commented on GitHub (May 24, 2025):
@dangrous The above PR only hides the extra-pop up so if we want to combine the pop-ups that option is still good and you can keep having a stab at it. In fact it would work well with my change as we still need to hide the 2nd pop-up.