actualbudget/actual

[Bug]: Changing mobile transaction amount leads to unexpected amount

Open

#3194 opened on Aug 4, 2024

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (7,129 stars) (603 forks)batch import
buggood first issuehelp wantedresponsivetransactions

Description

Verified issue does not already exist?

  • I have searched and found no existing issue
  • I will be providing steps how to reproduce the bug (in most cases this will also mean uploading a demo budget file)

What happened?

When adding new transactions on the mobile PWA, if the backspace button is used to modify the amount, the amount is egregiously large.

Couple of workarounds seem to work in the meanwhile:

  • Click on another menu item like Payee and return to the amount field to enter the correct amount.
  • Long press backspace to force delete the amount and start typing with "0" as the first entry.

I have also attached a video of the bug showing both workarounds.

https://github.com/user-attachments/assets/aba71e12-70cc-4bb3-a2a0-7ca9ea274f67

Where are you hosting Actual?

Pikapods

What browsers are you seeing the problem on?

Chrome, Microsoft Edge

Operating System

Mobile Device

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactJavaScriptMobile input handling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the mobile transaction amount input component, likely in the `packages/desktop client/src/components/modals/` directory. Look for how the amount is updated on each keystroke, especially handling of backspace. The issue suggests that when backspace is pressed, the amount becomes large, likely due to incorrect parsing or state update logic. Check the input's onChange handler and how it processes digits and backspace. Consider using a controlled input with proper value sanitization. Also review any existing tests for this component.