[PR #5372] [WIP] fix: ensure consistent text selection in reconciliation modal #12956

Closed
opened 2026-04-10 21:43:19 -05:00 by GiteaMirror · 0 comments
Owner

Original Pull Request: https://github.com/actualbudget/actual/pull/5372

State: closed
Merged: No


This PR resolves inconsistent text selection behavior in the reconciliation modal's amount input field. The issue manifested as the input field's text not being reliably highlighted when the modal opened, making it harder for users to quickly type over the value.

Solution

  1. Adding a dedicated useRef hook to maintain a stable reference to the input element
  2. Implementing a useEffect hook that watches for changes to the input value
  3. Adding a small delay (100ms) before selecting the text to ensure the component is fully mounted and visible
  4. Maintaining compatibility with existing ref usage while adding our own reference

Key changes:

  • Added proper ref handling to support both function and object refs
  • Implemented a consistent selection mechanism that only triggers when there's a value to select
  • Ensured the selection happens after the component is fully mounted and visible

Testing

The fix was tested by:

  1. Opening the reconciliation modal multiple times
  2. Verifying that the input text is consistently highlighted
  3. Confirming that the selection behavior works across different scenarios (empty vs non-empty values)
  4. Ensuring no regression in existing functionality

Closes #5366

https://github.com/user-attachments/assets/22676351-0a3b-4876-9bfb-d382215e0585

**Original Pull Request:** https://github.com/actualbudget/actual/pull/5372 **State:** closed **Merged:** No --- This PR resolves inconsistent text selection behavior in the reconciliation modal's amount input field. The issue manifested as the input field's text not being reliably highlighted when the modal opened, making it harder for users to quickly type over the value. ## Solution 1. Adding a dedicated `useRef` hook to maintain a stable reference to the input element 2. Implementing a `useEffect` hook that watches for changes to the input value 3. Adding a small delay (100ms) before selecting the text to ensure the component is fully mounted and visible 4. Maintaining compatibility with existing ref usage while adding our own reference Key changes: - Added proper ref handling to support both function and object refs - Implemented a consistent selection mechanism that only triggers when there's a value to select - Ensured the selection happens after the component is fully mounted and visible ## Testing The fix was tested by: 1. Opening the reconciliation modal multiple times 2. Verifying that the input text is consistently highlighted 3. Confirming that the selection behavior works across different scenarios (empty vs non-empty values) 4. Ensuring no regression in existing functionality ## Related Issues Closes #5366 https://github.com/user-attachments/assets/22676351-0a3b-4876-9bfb-d382215e0585
GiteaMirror added the pull-request label 2026-04-10 21:43:19 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#12956