github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-07-16 23:26:48 -05:00
Code Issues 3.0k Packages Projects Releases 58 Wiki Activity

[PR #6732] [CLOSED] Fix arrow key navigation in category autocomplete #32626

New Issue
Closed
opened 2026-04-18 08:38:15 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-18 08:38:15 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/6732
Author: @Copilot
Created: 1/20/2026
Status: ❌ Closed

Base: master ← Head: copilot/fix-down-arrow-key-selection

📝 Commits (7)

  • 51e4f0b Initial plan
  • c9688bd Fix down arrow key category selection by using plain HTML input in autocomplete
  • 44317bd Address code review feedback: improve comments and reuse baseInputStyle
  • f3e1d21 Revert changes - investigating root cause
  • ac4aace Fix arrow key navigation by setting initial highlightedIndex for empty values
  • c2b737a Fix arrow key navigation by setting highlightedIndex when dropdown opens
  • a94e6f1 Fix arrow key navigation by setting highlightedIndex in open() function

📊 Changes

1 file changed (+23 additions, -7 deletions)

View changed files

📝 packages/desktop-client/src/components/autocomplete/Autocomplete.tsx (+23 -7)

📄 Description

Arrow key navigation stopped working in the transaction category dropdown after a recent update. Users had to resort to mouse selection, breaking keyboard-only workflows.

Root Cause

The highlightedIndex was not being properly initialized when the dropdown opened with an empty field. When tabbing to the category field, the onInputValueChange handler is not called (since the value hasn't changed), leaving highlightedIndex at null and preventing Downshift from handling arrow key navigation.

The issue was specific to CategoryAutocomplete because it uses a custom getHighlightedIndex function that skips the "Split Transaction" option (setting initial highlight to index 1 instead of 0). Without proper initialization, keyboard navigation would only work after hovering with the mouse first.

Solution

Modified the open() function to set the initial highlightedIndex synchronously when the dropdown opens. This ensures:

  • CategoryAutocomplete sets the initial highlight to index 1 (skipping "Split Transaction")
  • AccountAutocomplete sets the initial highlight to index 0
  • Arrow key navigation works immediately without requiring mouse hover
  • The fix works even when tabbing to an empty field
  • Timing is deterministic and doesn't rely on React's effect scheduling

Changes Made

  • File: packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
  • Lines: ~254-268
  • Change: Modified open() function to synchronously set highlightedIndex using the getHighlightedIndex function when the dropdown opens
  • Additional Change: Modified onInputValueChange handler to set highlightedIndex for consistency when the value changes

Testing

  • ✅ Type checking passed
  • ✅ Linting passed
  • ✅ Manual testing confirmed arrow key navigation works correctly
  • ✅ Code review passed with no issues
  • ✅ Security scan passed (0 vulnerabilities)

Verification

Arrow key navigation now works as expected in the category dropdown:

The screenshot shows the "Food" category properly highlighted (with darker blue background) after pressing the down arrow key, confirming the fix works correctly.

Original prompt

This section details on the original issue you should resolve

<issue_title>[Bug]: Down arrow key no longer selects category</issue_title>
<issue_description>### Verified issue does not already exist?

  • I have searched and found no existing issue

What happened?

Usually to enter a transaction I click "Add new", and then I use my keyboard (tab + arrow keys) to fill in all the fields.

After a recent update pressing the "down arrow" key no longer lets you select the category. This means I need to use my mouse to select category which is much slower.

Filing as bug instead of feature request because I am 99% sure this worked in the past.

Client/server version v25.12.0

How can we reproduce the issue?

On a PC

  1. Go to account view
  2. Click "Add new"
  3. Tab over to "Category" field
  4. Press down arrow -> Notice that the first category in the list was not selected after pressing down arrow

Expected behaviour: First down arrow press selects "Split Transaction", second press selects the first category, third press selects second category, and so on.

Where are you hosting Actual?

Docker

What browsers are you seeing the problem on?

  • Firefox
  • Chrome

Operating System

Windows 11</issue_description>

Comments on the Issue (you are @copilot in this section)

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/6732 **Author:** [@Copilot](https://github.com/apps/copilot-swe-agent) **Created:** 1/20/2026 **Status:** ❌ Closed **Base:** `master` ← **Head:** `copilot/fix-down-arrow-key-selection` --- ### 📝 Commits (7) - [`51e4f0b`](https://github.com/actualbudget/actual/commit/51e4f0b11dd84c356108fd430273328f05f88808) Initial plan - [`c9688bd`](https://github.com/actualbudget/actual/commit/c9688bd38c535d6b38b0584cb1598074a908515d) Fix down arrow key category selection by using plain HTML input in autocomplete - [`44317bd`](https://github.com/actualbudget/actual/commit/44317bd0ac983966f94df07ac8853b05f0a60efb) Address code review feedback: improve comments and reuse baseInputStyle - [`f3e1d21`](https://github.com/actualbudget/actual/commit/f3e1d21b53b4b9681e454c3a4825072bde5d0656) Revert changes - investigating root cause - [`ac4aace`](https://github.com/actualbudget/actual/commit/ac4aace96de6702a96cfeb6bdc7b78c47a68fe3d) Fix arrow key navigation by setting initial highlightedIndex for empty values - [`c2b737a`](https://github.com/actualbudget/actual/commit/c2b737a96e382c14eb392f7b39fa08abcdb6385d) Fix arrow key navigation by setting highlightedIndex when dropdown opens - [`a94e6f1`](https://github.com/actualbudget/actual/commit/a94e6f13d4e14f7c787e13c6ed9f45f8c7ba4571) Fix arrow key navigation by setting highlightedIndex in open() function ### 📊 Changes **1 file changed** (+23 additions, -7 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/components/autocomplete/Autocomplete.tsx` (+23 -7) </details> ### 📄 Description Arrow key navigation stopped working in the transaction category dropdown after a recent update. Users had to resort to mouse selection, breaking keyboard-only workflows. ## Root Cause The `highlightedIndex` was not being properly initialized when the dropdown opened with an empty field. When tabbing to the category field, the `onInputValueChange` handler is not called (since the value hasn't changed), leaving `highlightedIndex` at `null` and preventing Downshift from handling arrow key navigation. The issue was specific to CategoryAutocomplete because it uses a custom `getHighlightedIndex` function that skips the "Split Transaction" option (setting initial highlight to index 1 instead of 0). Without proper initialization, keyboard navigation would only work after hovering with the mouse first. ## Solution Modified the `open()` function to set the initial `highlightedIndex` synchronously when the dropdown opens. This ensures: - CategoryAutocomplete sets the initial highlight to index 1 (skipping "Split Transaction") - AccountAutocomplete sets the initial highlight to index 0 - Arrow key navigation works immediately without requiring mouse hover - The fix works even when tabbing to an empty field - Timing is deterministic and doesn't rely on React's effect scheduling ## Changes Made - **File**: `packages/desktop-client/src/components/autocomplete/Autocomplete.tsx` - **Lines**: ~254-268 - **Change**: Modified `open()` function to synchronously set `highlightedIndex` using the `getHighlightedIndex` function when the dropdown opens - **Additional Change**: Modified `onInputValueChange` handler to set `highlightedIndex` for consistency when the value changes ## Testing - ✅ Type checking passed - ✅ Linting passed - ✅ Manual testing confirmed arrow key navigation works correctly - ✅ Code review passed with no issues - ✅ Security scan passed (0 vulnerabilities) ## Verification Arrow key navigation now works as expected in the category dropdown: <img src="https://github.com/user-attachments/assets/8bb9cbf8-49b8-4dae-9f1b-6866fad81718"> The screenshot shows the "Food" category properly highlighted (with darker blue background) after pressing the down arrow key, confirming the fix works correctly. <!-- START COPILOT ORIGINAL PROMPT --> <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>[Bug]: Down arrow key no longer selects category</issue_title> > <issue_description>### Verified issue does not already exist? > > - [x] I have searched and found no existing issue > > ### What happened? > > Usually to enter a transaction I click "Add new", and then I use my keyboard (tab + arrow keys) to fill in all the fields. > > After a recent update pressing the "down arrow" key no longer lets you select the category. This means I need to use my mouse to select category which is much slower. > > Filing as bug instead of feature request because I am 99% sure this worked in the past. > > Client/server version `v25.12.0` > > ### How can we reproduce the issue? > > On a PC > > 1. Go to account view > 2. Click "Add new" > 3. Tab over to "Category" field > 4. Press down arrow -> Notice that the first category in the list was not selected after pressing down arrow > > Expected behaviour: First down arrow press selects "Split Transaction", second press selects the first category, third press selects second category, and so on. > > ### Where are you hosting Actual? > > Docker > > ### What browsers are you seeing the problem on? > > - Firefox > - Chrome > > ### Operating System > > Windows 11</issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> <!-- START COPILOT CODING AGENT SUFFIX --> - Fixes actualbudget/actual#6410 <!-- START COPILOT CODING AGENT TIPS --> --- 💬 We'd love your input! Share your thoughts on Copilot coding agent in our [2 minute survey](https://gh.io/copilot-coding-agent-survey). --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-18 08:38:15 -05:00
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 pull-request
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#32626
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?