github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-07-15 22:54:03 -05:00
Code Issues 3.0k Packages Projects Releases 58 Wiki Activity

[GH-ISSUE #4939] [Bug]: Overspending / Transfer Funds pop-up gets covered with second pop-up. #43758

New Issue
Closed
opened 2026-04-26 04:26:43 -05:00 by GiteaMirror · 5 comments
GiteaMirror commented 2026-04-26 04:26:43 -05:00
Owner
Copy Link

Originally created by @gitchap on GitHub (May 5, 2025).
Original GitHub issue: https://github.com/actualbudget/actual/issues/4939

Verified issue does not already exist?

  • I have searched and found no existing issue

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

Originally created by @gitchap on GitHub (May 5, 2025). Original GitHub issue: https://github.com/actualbudget/actual/issues/4939 ### Verified issue does not already exist? - [x] I have searched and found no existing issue ### 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
GiteaMirror added the good first issuebug labels 2026-04-26 04:26:43 -05:00
GiteaMirror commented 2026-04-26 04:26:45 -05:00
Author
Owner
Copy Link

@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.

<!-- gh-comment-id:2851870021 --> @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.
GiteaMirror commented 2026-04-26 04:26:45 -05:00
Author
Owner
Copy Link

@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

<!-- gh-comment-id:2854907130 --> @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
GiteaMirror commented 2026-04-26 04:26:46 -05:00
Author
Owner
Copy Link

@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

<!-- gh-comment-id:2896443522 --> @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
GiteaMirror commented 2026-04-26 04:26:46 -05:00
Author
Owner
Copy Link

@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:

  1. Introducing a new prop, perhaps named tooltipDisabled, to the BalanceWithCarryover component.
  2. When the Popover for the balance is opened in ExpenseCategoryMonth, we would pass true to this tooltipDisabled prop for the BalanceWithCarryover instance, 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 the Tooltip in BalanceWithCarryover and potentially within the BalanceMovementMenu Popover. While this could promote reusability, it would involve more significant changes:
* Extracting the GoalStatusDisplay logic and JSX into a new component file.
* Modifying BalanceWithCarryover to use this new component.
* Fetching the necessary data (balance, goal, budget values etc.) in ExpenseCategoryMonth and passing it down to BalanceMovementMenu, which would then pass it to the new shared component.
* Adjusting BalanceMovementMenu to 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 tooltipDisabled prop solution for the PR.

<!-- gh-comment-id:2906709762 --> @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: 1. Introducing a new prop, perhaps named `tooltipDisabled`, to the `BalanceWithCarryover` component. 2. When the Popover for the balance is opened in `ExpenseCategoryMonth`, we would pass `true` to this `tooltipDisabled` prop for the `BalanceWithCarryover` instance, 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 the `Tooltip` in `BalanceWithCarryover` and potentially within the `BalanceMovementMenu` Popover. While this could promote reusability, it would involve more significant changes: * Extracting the `GoalStatusDisplay` logic and JSX into a new component file. * Modifying `BalanceWithCarryover` to use this new component. * Fetching the necessary data (balance, goal, budget values etc.) in `ExpenseCategoryMonth` and passing it down to `BalanceMovementMenu`, which would then pass it to the new shared component. * Adjusting `BalanceMovementMenu` to 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 `tooltipDisabled` prop solution for the PR.
GiteaMirror commented 2026-04-26 04:26:47 -05:00
Author
Owner
Copy Link

@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.

<!-- gh-comment-id:2906842417 --> @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.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
tech-support
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label bug good first issue
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#43758
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?