actualbudget/actual

[Bug]: Mobile: Enter after inserting transaction split amount > UI moves to next split but keyboard focus stays on the 1st amount

Open

#3933 opened on Dec 5, 2024

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

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?

I was expecting that the focus would've moved to the next split items amount if the UI moved there. Or actually, that it would've closed the keyboard

Steps to repro:

  1. be on mobile (view)
  2. Click on new transaction > enter an amount
  3. Click 'split' > type the amount > press enter (4. move to the second split, enter amount, press enter > nothing happens)

Happens on edge and on v24.11.0, Chrome 131 on android and Windows 11

https://github.com/user-attachments/assets/afa4dc33-92f6-4ca8-a3f6-50aab3739711

Where are you hosting Actual?

Pikapods

What browsers are you seeing the problem on?

Chrome

Operating System

Mobile Device

Contributor guide

Tech stack
javascriptreacthtmlcss
Domain
mobilefrontend
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
React hooks basicsDOM event handling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
55
Research direction
Reproduce the bug in mobile view. Locate the split transaction amount input component, likely in the transaction entry form. Inspect the keydown event handler for Enter key to see why focus does not move to the next split input. Check if there is a focus management function or if the event propagation is being stopped. The UI moves to the next split, indicating state changes, but focus is not updated. A fix might involve using refs to programmatically focus the next input.