[Feedback] New autocomplete

[j-f1]

Introduced in #741.

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

Autocomplete:

• The value cannot be selected (using text selection), unlike in the old one. This makes it hard to switch between very similar payee names 🐛 (autocomplete) allow editing selected payee name #856
• 🐛 (autocomplete) consistent input height between multi/single input #787
• 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?
• 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
• global undo/redo don’t work when focused on a text field
• 🐛 (autocomplete) set min-width of the autocomplete #834
• 🐛 (autocomplete) set min-height used to calculate the flip (top-bottom) #837
• 🐛 (autocomplete) remove portal from table view for smoother experience #839
• Placeholder bug (info)
• Autocomplete is a different height than input 🐛 (autocomplete) height of the input box #862
• 🐛 (autocomplete) show 'create payee' only if no payee matched #881 - info
• [Bug]: Selected Line Stays on Top #899
• Control the "selected"/"hovered" element in the selection list - more info

PayeeAutocomplete:

• 🐛 (autocomplete) delay when switching from Select to CreatableSelect #836

GenericInput:

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

---

Components that use the old autocomplete:

• ♻️ (autocomplete) refactor PayeeAutocomplete to react-select #741
• AccountAutocomplete ♻️ further autocomplete refactors #778
• GenericInput ♻️ further autocomplete refactors #778
• CategorySelect ♻️ refactor Nordigen and Category autocomplete usage #784
• NordigenExternalMsg ♻️ refactor Nordigen and Category autocomplete usage #784

[MatissJanis]

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.

[MatissJanis]

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.

[MatissJanis]

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

Could you elaborate on this one?

[j-f1]

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)

[albertogasparin]

[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.

[MatissJanis]

@albertogasparin good idea: #834

[MatissJanis]

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?

[j-f1]

That’s reasonable.

[MatissJanis]

@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)

[j-f1]

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.

[MatissJanis]

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?

Screen.Recording.2023-04-01.at.19.20.31.mov

[j-f1]

Sure, fine with me!

[j-f1]

[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

[rich-howell]

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

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 ....

[jnv]

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

[j-f1]

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.

[jnv]

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.

[pcchristie]

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.

[MatissJanis]

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..

#773 (comment) & #773 (comment)

[MatissJanis]

👋 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.

#916