github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-05-05 22:52:20 -05:00
Code Issues 1.5k Packages Projects Releases 54 Wiki Activity

[GH-ISSUE #773] [Feedback] New autocomplete #7240

New Issue
Closed
opened 2026-04-10 16:59:29 -05:00 by GiteaMirror · 20 comments
GiteaMirror commented 2026-04-10 16:59:29 -05:00
Owner
Copy Link

Originally created by @j-f1 on GitHub (Mar 17, 2023).
Original GitHub issue: https://github.com/actualbudget/actual/issues/773

Originally assigned to: @MatissJanis on GitHub.

Introduced in #741.

Remaining bugs/tasks (comment below to add to the list!)

Autocomplete:

PayeeAutocomplete:

GenericInput:

  • When the field is freeform, the suggestion menu shouldn’t appear? (maybe)

Components that use the old autocomplete:

Originally created by @j-f1 on GitHub (Mar 17, 2023). Original GitHub issue: https://github.com/actualbudget/actual/issues/773 Originally assigned to: @MatissJanis on GitHub. Introduced in #741. Remaining bugs/tasks (comment below to add to the list!) Autocomplete: - [x] The value cannot be selected (using text selection), unlike in the old one. This makes it hard to switch between very similar payee names #856 - [x] #787 - [x] ~not sure the “x” button provides much value and it is super weird (it acts on mouse down + delay rather than mouse up), maybe it can be removed?~ - [x] ~When scrolling the focused row out of view it (sometimes) suddenly jumps back into view. The old component gracefully drops focus and picks it up when scrolled back into view~ - [x] ~global undo/redo don’t work when focused on a text field~ - [x] #834 - [x] #837 - [x] #839 - [ ] Placeholder bug ([info](https://github.com/actualbudget/actual/pull/856#pullrequestreview-1373113136)) - [x] Autocomplete is a different height than input #862 - [x] #881 - [info](https://github.com/actualbudget/actual/issues/773#issuecomment-1499999362) - [ ] #899 - [ ] Control the "selected"/"hovered" element in the selection list - [more info](https://github.com/actualbudget/actual/issues/773#issuecomment-1510438900) PayeeAutocomplete: - [x] #836 GenericInput: - [x] ~When the field is freeform, the suggestion menu shouldn’t appear? (maybe)~ --- Components that use the old autocomplete: - [x] #741 - [x] AccountAutocomplete #778 - [x] GenericInput #778 - [x] CategorySelect #784 - [x] NordigenExternalMsg #784
GiteaMirror added the tech debtuser interfacehelp wanted labels 2026-04-10 16:59:29 -05:00
GiteaMirror commented 2026-04-10 16:59:31 -05:00
Author
Owner
Copy Link

@MatissJanis commented on GitHub (Mar 17, 2023):

I expanded the scope of this issue to be the full migration to the new autocomplete component. Not just PayeeAutocomplete.

Hope you don't mind.

<!-- gh-comment-id:1474483471 --> @MatissJanis commented on GitHub (Mar 17, 2023): I expanded the scope of this issue to be the full migration to the new autocomplete component. Not just PayeeAutocomplete. Hope you don't mind.
GiteaMirror commented 2026-04-10 16:59:32 -05:00
Author
Owner
Copy Link

@MatissJanis commented on GitHub (Mar 18, 2023):

not sure the “x” button provides much value and it is super weird (it acts on mouse down + delay rather than mouse up), maybe it can be removed?

I actually view the "x" button more as a feature, not a bug. It's a convenient way to clear the autocomplete selection.

<!-- gh-comment-id:1474963189 --> @MatissJanis commented on GitHub (Mar 18, 2023): > not sure the “x” button provides much value and it is super weird (it acts on mouse down + delay rather than mouse up), maybe it can be removed? I actually view the "x" button more as a feature, not a bug. It's a convenient way to clear the autocomplete selection.
GiteaMirror commented 2026-04-10 16:59:33 -05:00
Author
Owner
Copy Link

@MatissJanis commented on GitHub (Mar 19, 2023):

global undo/redo don’t work when focused on a text field

Could you elaborate on this one?

<!-- gh-comment-id:1475355723 --> @MatissJanis commented on GitHub (Mar 19, 2023): > global undo/redo don’t work when focused on a text field Could you elaborate on this one?
GiteaMirror commented 2026-04-10 16:59:34 -05:00
Author
Owner
Copy Link

@j-f1 commented on GitHub (Mar 19, 2023):

Sure!

  1. Delete a transaction
  2. Focus a new autocomplete field
  3. Press cmd+z or ctrl+z

Expected behavior: undoes the deletion. Actual behavior: nothing (compare with handling of old autocomplete)

<!-- gh-comment-id:1475372471 --> @j-f1 commented on GitHub (Mar 19, 2023): Sure! 1. Delete a transaction 2. Focus a new autocomplete field 3. Press cmd+z or ctrl+z Expected behavior: undoes the deletion. Actual behavior: nothing (compare with handling of old autocomplete)
GiteaMirror commented 2026-04-10 16:59:34 -05:00
Author
Owner
Copy Link

@albertogasparin commented on GitHub (Mar 24, 2023):

[RESOLVED]

Have another bug - request for the new autocomplete: allow the dropdown to have a min width, expanding past the input. Reason being when viewing the table on narrow screens (eg iPad) the dropdown is so small that each row wraps into 3, making it hard to scroll/select.

<!-- gh-comment-id:1482254636 --> @albertogasparin commented on GitHub (Mar 24, 2023): **[RESOLVED]** Have another bug - request for the new autocomplete: allow the dropdown to have a min width, expanding past the input. Reason being when viewing the table on narrow screens (eg iPad) the dropdown is so small that each row wraps into 3, making it hard to scroll/select.
GiteaMirror commented 2026-04-10 16:59:35 -05:00
Author
Owner
Copy Link

@MatissJanis commented on GitHub (Mar 31, 2023):

@albertogasparin good idea: #834

<!-- gh-comment-id:1492391812 --> @MatissJanis commented on GitHub (Mar 31, 2023): @albertogasparin good idea: #834
GiteaMirror commented 2026-04-10 16:59:35 -05:00
Author
Owner
Copy Link

@MatissJanis commented on GitHub (Mar 31, 2023):

Sure!

  1. Delete a transaction
  2. Focus a new autocomplete field
  3. Press cmd+z or ctrl+z

Expected behavior: undoes the deletion. Actual behavior: nothing (compare with handling of old autocomplete)

Ok, looked more into this. It's interesting..

Yes, the old autocomplete allowed global "ctrl+z" operation. But judging by this code - it was actually a bug. Since we explicitly capture undo events that happen in input boxes. I presume it's so the "undo" would apply only to the local input box and would not affect the global state.

With the new autocomplete this bug is fixed. Which means we are no longer able to do global undo operation if the autocomplete field is focused.

Given all this: I think this issue is a wont-fix. WDYT?

<!-- gh-comment-id:1492422961 --> @MatissJanis commented on GitHub (Mar 31, 2023): > Sure! > > 1. Delete a transaction > 2. Focus a new autocomplete field > 3. Press cmd+z or ctrl+z > > Expected behavior: undoes the deletion. Actual behavior: nothing (compare with handling of old autocomplete) Ok, looked more into this. It's interesting.. Yes, the old autocomplete allowed global "ctrl+z" operation. But judging by [this code](https://github.com/actualbudget/actual/blob/master/packages/desktop-client/src/browser-preload.browser.js#L128-L134) - it was actually a bug. Since we explicitly capture undo events that happen in input boxes. I presume it's so the "undo" would apply only to the local input box and would not affect the global state. With the new autocomplete this bug is fixed. Which means we are no longer able to do global undo operation if the autocomplete field is focused. Given all this: I think this issue is a wont-fix. WDYT?
GiteaMirror commented 2026-04-10 16:59:36 -05:00
Author
Owner
Copy Link

@j-f1 commented on GitHub (Mar 31, 2023):

That’s reasonable.

<!-- gh-comment-id:1492425740 --> @j-f1 commented on GitHub (Mar 31, 2023): That’s reasonable.
GiteaMirror commented 2026-04-10 16:59:37 -05:00
Author
Owner
Copy Link

@MatissJanis commented on GitHub (Mar 31, 2023):

@j-f1 I don't recall what was this one. Can you jog my memory?

When the field is freeform, the suggestion menu shouldn’t appear? (maybe)

<!-- gh-comment-id:1492643253 --> @MatissJanis commented on GitHub (Mar 31, 2023): @j-f1 I don't recall what was this one. Can you jog my memory? > When the field is freeform, the suggestion menu shouldn’t appear? (maybe)
GiteaMirror commented 2026-04-10 16:59:38 -05:00
Author
Owner
Copy Link

@j-f1 commented on GitHub (Mar 31, 2023):

When you filter by Notes → “one of” you get this UI. I think that line was about potentially getting rid of the “Add ‘test’” popup but I’m not sure if it’s a good idea.

Screenshot_2023-03-31 17 07 47
<!-- gh-comment-id:1492666998 --> @j-f1 commented on GitHub (Mar 31, 2023): When you filter by Notes → “one of” you get this UI. I think that line was about potentially getting rid of the “Add ‘test’” popup but I’m not sure if it’s a good idea. <img width="316" alt="Screenshot_2023-03-31 17 07 47" src="https://user-images.githubusercontent.com/25517624/229241522-47283edf-faa7-4ab0-a406-db33773966c1.png">
GiteaMirror commented 2026-04-10 16:59:38 -05:00
Author
Owner
Copy Link

@MatissJanis commented on GitHub (Apr 1, 2023):

When scrolling the focused row out of view it (sometimes) suddenly jumps back into view. The old component gracefully drops focus and picks it up when scrolled back into view

Managed to reproduce it, but it also happens in the old autocomplete (see demo below). Basically it has to do with how the table virtualizes and animates the rows outside of the viewport.. When a row is moved outside of the viewport - the row (including autocomplete) is unmounted. And then re-mounted again. Which causes this flash.

IMO this will be addressed once we get to the table migration. As for the autocomplete: I would put this as out-of-scope. WDYT?

https://user-images.githubusercontent.com/886567/229308099-320b111c-297a-4fe7-97a1-9777192039bc.mov

<!-- gh-comment-id:1493067746 --> @MatissJanis commented on GitHub (Apr 1, 2023): > When scrolling the focused row out of view it (sometimes) suddenly jumps back into view. The old component gracefully drops focus and picks it up when scrolled back into view Managed to reproduce it, but it also happens in the old autocomplete (see demo below). Basically it has to do with how the table virtualizes and animates the rows outside of the viewport.. When a row is moved outside of the viewport - the row (including autocomplete) is unmounted. And then re-mounted again. Which causes this flash. IMO this will be addressed once we get to the table migration. As for the autocomplete: I would put this as out-of-scope. WDYT? https://user-images.githubusercontent.com/886567/229308099-320b111c-297a-4fe7-97a1-9777192039bc.mov
GiteaMirror commented 2026-04-10 16:59:39 -05:00
Author
Owner
Copy Link

@j-f1 commented on GitHub (Apr 1, 2023):

Sure, fine with me!

<!-- gh-comment-id:1493078095 --> @j-f1 commented on GitHub (Apr 1, 2023): Sure, fine with me!
GiteaMirror commented 2026-04-10 16:59:39 -05:00
Author
Owner
Copy Link

@j-f1 commented on GitHub (Apr 6, 2023):

[RESOLVED]

New issue: the autocomplete is a different height than regular inputs. This is mainly noticeable in the rule editor, where the condition/action rows change height when switching between e.g. payee is and date is and notes is

<!-- gh-comment-id:1499235857 --> @j-f1 commented on GitHub (Apr 6, 2023): **[RESOLVED]** New issue: the autocomplete is a different height than regular inputs. This is mainly noticeable in the rule editor, where the condition/action rows change height when switching between e.g. `payee is` and `date is` and `notes is`
GiteaMirror commented 2026-04-10 16:59:39 -05:00
Author
Owner
Copy Link

@rich-howell commented on GitHub (Apr 7, 2023):

When adding a transaction to the transaction table, generally I will type my Payee Name E.G. Cambrian Heritage Railways there is sometimes already a Payee with that name in the list but for some reason I am presented with the following dropdown

image

There is only one of the Payee in the list, it is an exact match, that should be selected, not sure why I am presented with the option to create the Payee with a name that distinctly already exists.

I am sure it didn't used to be like this ....

<!-- gh-comment-id:1499999362 --> @rich-howell commented on GitHub (Apr 7, 2023): When adding a transaction to the transaction table, generally I will type my Payee Name E.G. **Cambrian Heritage Railways** there is sometimes already a Payee with that name in the list but for some reason I am presented with the following dropdown ![image](https://user-images.githubusercontent.com/22135084/230557720-ef24631b-6d17-46b8-b037-e129cb89f747.png) There is only one of the Payee in the list, it is an exact match, that should be selected, not sure why I am presented with the option to create the Payee with a name that distinctly already exists. I am sure it didn't used to be like this ....
GiteaMirror commented 2026-04-10 16:59:40 -05:00
Author
Owner
Copy Link

@jnv commented on GitHub (Apr 12, 2023):

Hi, since I've updated to the April version of Actual, the new autocomplete in category select causes breaks my keyboard-centered workflow when entering a transaction.

My workflow used to be following:

  1. I start creating a new transaction
  2. Enter payee, hit Tab
  3. Enter Note, hit Tab

At this point Category is usually populated either from payee or note.

  1. Since category is already populated, I just hit Tab again
  2. Enter amount in Payment, Tab, ignore Deposit, Tab, space to check Cleared, Enter to add the transaction

Now with the new Autocomplete component, there's a problem in Step 5: If the category is populated by Note, moving focus to the Category pre-selects Split Transaction, so hitting Tab creates a split transaction. To my knowledge, there's no way to turn a split transaction back to a regular transaction, so I need to cancel the transaction and start a new one.

This issue doesn't happen when the category gets selected by Payee, so I think it has to do with delay in rule evaluation (when the category select gets focused before the category is automatically selected).

I recorded the problem to better illustrate my point:

Screencast from 2023-04-12 12-41-13.webm

<!-- gh-comment-id:1505058502 --> @jnv commented on GitHub (Apr 12, 2023): Hi, since I've updated to the April version of Actual, the new autocomplete in category select causes breaks my keyboard-centered workflow when entering a transaction. My workflow used to be following: 1. I start creating a new transaction 2. Enter payee, hit Tab 3. Enter Note, hit Tab _At this point Category is usually populated either from payee or note._ 5. Since category is already populated, I just hit Tab again 6. Enter amount in Payment, Tab, ignore Deposit, Tab, space to check Cleared, Enter to add the transaction Now with the new Autocomplete component, there's a problem in Step 5: If the category is populated by Note, moving focus to the Category pre-selects Split Transaction, so hitting Tab creates a split transaction. To my knowledge, there's no way to turn a split transaction back to a regular transaction, so I need to cancel the transaction and start a new one. This issue doesn't happen when the category gets selected by Payee, so I think it has to do with delay in rule evaluation (when the category select gets focused before the category is automatically selected). I recorded the problem to better illustrate my point: [Screencast from 2023-04-12 12-41-13.webm](https://user-images.githubusercontent.com/616767/231434786-fdffaa34-6e6d-48b6-9920-1147a4b775fd.webm)
GiteaMirror commented 2026-04-10 16:59:40 -05:00
Author
Owner
Copy Link

@j-f1 commented on GitHub (Apr 12, 2023):

To my knowledge, there's no way to turn a split transaction back to a regular transaction, so I need to cancel the transaction and start a new one.

You should be able to hit ctrl/cmd+Z to undo! But I agree this should be fixed.

<!-- gh-comment-id:1505089020 --> @j-f1 commented on GitHub (Apr 12, 2023): > To my knowledge, there's no way to turn a split transaction back to a regular transaction, so I need to cancel the transaction and start a new one. You should be able to hit ctrl/cmd+Z to undo! But I agree this should be fixed.
GiteaMirror commented 2026-04-10 16:59:40 -05:00
Author
Owner
Copy Link

@jnv commented on GitHub (Apr 12, 2023):

You should be able to hit ctrl/cmd+Z to undo! But I agree this should be fixed.

That was my thinking exactly. Undo works for removing an added transaction, but doesn't work for changing an uncommitted split transaction back to a regular one.

<!-- gh-comment-id:1505156684 --> @jnv commented on GitHub (Apr 12, 2023): > You should be able to hit ctrl/cmd+Z to undo! But I agree this should be fixed. That was my thinking exactly. Undo works for removing an added transaction, but doesn't work for changing an uncommitted split transaction back to a regular one.
GiteaMirror commented 2026-04-10 16:59:41 -05:00
Author
Owner
Copy Link

@pcchristie commented on GitHub (Apr 15, 2023):

I am having @jnv 's issue but also another similar but different one. I used to start at the bottom of my recently imported transactions and shift+tab back through the transactions until I get to the top.

When I am entering a category, let's say "Food" I would previously type "Fo" and food would suggest autocomplete. At that point I should shift+tab (or tab) past it and it should fill. Instead, it removes my input and restores the category to blank. I swear it used to work "properly." Has anyone else noticed this?

It works well with Enter, but not with tab anymore.

<!-- gh-comment-id:1509440297 --> @pcchristie commented on GitHub (Apr 15, 2023): I am having @jnv 's issue but also another similar but different one. I used to start at the bottom of my recently imported transactions and shift+tab back through the transactions until I get to the top. When I am entering a category, let's say "Food" I would previously type "Fo" and food would suggest autocomplete. At that point I should shift+tab (or tab) past it and it should fill. Instead, it removes my input and restores the category to blank. I swear it used to work "properly." Has anyone else noticed this? It works well with Enter, but not with tab anymore.
GiteaMirror commented 2026-04-10 16:59:41 -05:00
Author
Owner
Copy Link

@MatissJanis commented on GitHub (Apr 16, 2023):

Both of the last two reported issues also relate to react-select not allowing us to natively control the "active"/"hovered" element. I'll see if there's any workaround here..

https://github.com/actualbudget/actual/issues/773#issuecomment-1505058502 & https://github.com/actualbudget/actual/issues/773#issuecomment-1509440297

<!-- gh-comment-id:1510438900 --> @MatissJanis commented on GitHub (Apr 16, 2023): Both of the last two reported issues also relate to `react-select` not allowing us to natively control the "active"/"hovered" element. I'll see if there's any workaround here.. https://github.com/actualbudget/actual/issues/773#issuecomment-1505058502 & https://github.com/actualbudget/actual/issues/773#issuecomment-1509440297
GiteaMirror commented 2026-04-10 16:59:42 -05:00
Author
Owner
Copy Link

@MatissJanis commented on GitHub (Apr 18, 2023):

👋 Calling off the new-autocomplete (react-select) experiment as a failure. Reverting back to previous autocomplete and fixing some things in the old one.

We might sometime in the future consider other alternatives. But clearly react-select is not exactly what we want. It has too many limitations that are tricky to work around.

https://github.com/actualbudget/actual/pull/916

<!-- gh-comment-id:1513738222 --> @MatissJanis commented on GitHub (Apr 18, 2023): 👋 Calling off the new-autocomplete (react-select) experiment as a failure. Reverting back to previous autocomplete and fixing some things in the old one. We _might_ sometime in the future consider other alternatives. But clearly `react-select` is not exactly what we want. It has too many limitations that are tricky to work around. https://github.com/actualbudget/actual/pull/916
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
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label help wanted tech debt user interface
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#7240
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?