github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-10 12:12:39 -05:00
Code Issues 250 Packages Projects Releases 53 Wiki Activity

[Bug]: iOS PWA, amount gets focused but no keyboard pops up when adding new transaction #947

New Issue
Closed
opened 2026-02-28 19:26:07 -06:00 by GiteaMirror · 10 comments
GiteaMirror commented 2026-02-28 19:26:07 -06:00
Owner
Copy Link

Originally created by @judge on GitHub (Feb 24, 2024).

Verified issue does not already exist?

  • I have searched and found no existing issue

Is this related to GoCardless, Simplefin or another bank-sync provider?

  • I have checked my server logs and could not see any errors there
  • I will be attaching my server logs to this issue
  • I will be attaching my client-side (browser) logs to this issue
  • I understand that this issue will be automatically closed if insufficient information is provided

What happened?

On iOS (either as a PWA or in Safari), when you tap New Transaction, the amount gets focused, but you cannot enter the amount because the keyboard does not appear. You have to unfocus and refocus the amount to be able to enter the amount. And then you cannot immediately focus on the payee or any other field. After you have entered the amount, if you tap on any of the next fields (payee or category), the amount gets unfocused first and then you have to tap again the field to select payee or category.

This flow makes entering transactions really slow and frustating. :( Is it possible to fix this? Thanks!

https://github.com/actualbudget/actual/assets/9569/1f417e78-585f-4941-9252-265382aaf127

What error did you receive?

No response

Where are you hosting Actual?

Fly.io

What browsers are you seeing the problem on?

Safari

Operating System

Mobile Device

Originally created by @judge on GitHub (Feb 24, 2024). ### Verified issue does not already exist? - [X] I have searched and found no existing issue ### Is this related to GoCardless, Simplefin or another bank-sync provider? - [ ] I have checked my server logs and could not see any errors there - [ ] I will be attaching my server logs to this issue - [ ] I will be attaching my client-side (browser) logs to this issue - [ ] I understand that this issue will be automatically closed if insufficient information is provided ### What happened? On iOS (either as a PWA or in Safari), when you tap New Transaction, the amount gets focused, but you cannot enter the amount because the keyboard does not appear. You have to unfocus and refocus the amount to be able to enter the amount. And then you cannot immediately focus on the payee or any other field. After you have entered the amount, if you tap on any of the next fields (payee or category), the amount gets unfocused first and then you have to tap again the field to select payee or category. This flow makes entering transactions really slow and frustating. :( Is it possible to fix this? Thanks! https://github.com/actualbudget/actual/assets/9569/1f417e78-585f-4941-9252-265382aaf127 ### What error did you receive? _No response_ ### Where are you hosting Actual? Fly.io ### What browsers are you seeing the problem on? Safari ### Operating System Mobile Device
GiteaMirror added the user interfacebugresponsive labels 2026-02-28 19:26:07 -06:00
GiteaMirror commented 2026-02-28 19:26:08 -06:00
Author
Owner
Copy Link

@Kidglove57 commented on GitHub (Feb 24, 2024):

I agree and indeed the mobile experience is still work in progress. I would be interested to know the reason for the current behaviour as I’m sure there is one, rather than an oversight.
You do get used to it and develop different muscle memory over time!

@Kidglove57 commented on GitHub (Feb 24, 2024): I agree and indeed the mobile experience is still work in progress. I would be interested to know the reason for the current behaviour as I’m sure there is one, rather than an oversight. You do get used to it and develop different muscle memory over time!
GiteaMirror commented 2026-02-28 19:26:09 -06:00
Author
Owner
Copy Link

@trevdor commented on GitHub (Mar 8, 2024):

  useEffect(() => {
    if (adding) {
      onTotalAmountEdit();
    }
  }, []);

https://github.com/actualbudget/actual/blob/master/packages/desktop-client/src/components/transactions/MobileTransaction.jsx#L492-L496

I see the convenience of the total amount being auto-focused if you intend to start by entering the amount.

Personally, though, I don't always start with Amount (for instance, if I've started the entry knowing the Payee/Category/etc but awaiting the total).
And right now the keyboard isn't showing on autofocus on iOS. (The first tap clears focus and a second tap triggers re-focus with the keyboard.)

❓ Does the keyboard show as expected on Android?

My preference would be to drop this useEffect and let folks tap any field for their first input, triggering the relevant keyboard.

Alternatively, I could see triggering the keyboard explicitly. Maybe manually firing focus of some kind on the <FocusableAmountInput>.

What do you think, @joel-jeremy?

@trevdor commented on GitHub (Mar 8, 2024): ``` useEffect(() => { if (adding) { onTotalAmountEdit(); } }, []); ``` https://github.com/actualbudget/actual/blob/master/packages/desktop-client/src/components/transactions/MobileTransaction.jsx#L492-L496 I see the convenience of the total amount being auto-focused if you intend to start by entering the amount. Personally, though, I don't always start with Amount (for instance, if I've started the entry knowing the Payee/Category/etc but awaiting the total). And right now the keyboard isn't showing on autofocus on iOS. (The first tap clears focus and a second tap triggers re-focus with the keyboard.) ❓ Does the keyboard show as expected on Android? My preference would be to drop this `useEffect` and let folks tap any field for their first input, triggering the relevant keyboard. Alternatively, I could see triggering the keyboard explicitly. Maybe manually firing `focus` of some kind on the `<FocusableAmountInput>`. What do you think, @joel-jeremy?
GiteaMirror commented 2026-02-28 19:26:09 -06:00
Author
Owner
Copy Link

@Teprifer commented on GitHub (Mar 8, 2024):

Android Firefox, keyboard appears as soon as the enter transaction page loads.

I think the auto selecting behaviour should remain, it's the first field on the page, and the amount is the one detail I'm actually trying to remember after having just made the purchase so it makes sense to enter it first.

@Teprifer commented on GitHub (Mar 8, 2024): Android Firefox, keyboard appears as soon as the enter transaction page loads. I think the auto selecting behaviour should remain, it's the first field on the page, and the amount is the one detail I'm actually trying to remember after having just made the purchase so it makes sense to enter it first.
GiteaMirror commented 2026-02-28 19:26:09 -06:00
Author
Owner
Copy Link

@joel-jeremy commented on GitHub (Mar 26, 2024):

This seems to be an issue with iOS (16 or lower) where programmatically focusing an element won't show the keyboard. It only shows when the focus is triggered by a user action: https://stackoverflow.com/a/74636176

@joel-jeremy commented on GitHub (Mar 26, 2024): This seems to be an issue with iOS (16 or lower) where programmatically focusing an element won't show the keyboard. It only shows when the focus is triggered by a user action: https://stackoverflow.com/a/74636176
GiteaMirror commented 2026-02-28 19:26:09 -06:00
Author
Owner
Copy Link

@MarcAroni81 commented on GitHub (Jul 5, 2024):

This seems to be an issue with iOS (16 or lower) where programmatically focusing an element won't show the keyboard. It only shows when the focus is triggered by a user action: https://stackoverflow.com/a/74636176

At least it’s behaving the same in iOS 17.6 (latest)

@MarcAroni81 commented on GitHub (Jul 5, 2024): > This seems to be an issue with iOS (16 or lower) where programmatically focusing an element won't show the keyboard. It only shows when the focus is triggered by a user action: https://stackoverflow.com/a/74636176 At least it’s behaving the same in iOS 17.6 (latest)
GiteaMirror commented 2026-02-28 19:26:09 -06:00
Author
Owner
Copy Link

@tatsumain commented on GitHub (Oct 16, 2024):

On Android 14:

Chrome / Chrome PWA: keyboard does not show up on entering add a transaction page, focused on the amount
Firefox: keyboard does show and is focused on the amount. if I close the keyboard (or just try to tap on other fields) without entering an amount, focus stays on the amount.

@tatsumain commented on GitHub (Oct 16, 2024): On Android 14: Chrome / Chrome PWA: keyboard does not show up on entering add a transaction page, focused on the amount Firefox: keyboard does show and is focused on the amount. if I close the keyboard (or just try to tap on other fields) without entering an amount, focus stays on the amount.
GiteaMirror commented 2026-02-28 19:26:10 -06:00
Author
Owner
Copy Link

@MarcAroni81 commented on GitHub (Oct 16, 2024):

This seems to be an issue with iOS (16 or lower) where programmatically focusing an element won't show the keyboard. It only shows when the focus is triggered by a user action: https://stackoverflow.com/a/74636176

At least it’s behaving the same in iOS 17.6 (latest)

Also confirmed on iOS18.1

My two Cents: I would also love to see it work that keyboard is automatically shown as soon as create a new transaction. (== to fix this bug)

Regarding the philosophy:
Maybe we should let the user decide how it should behave and offer a switch in the options area? Just one idea

@MarcAroni81 commented on GitHub (Oct 16, 2024): > > This seems to be an issue with iOS (16 or lower) where programmatically focusing an element won't show the keyboard. It only shows when the focus is triggered by a user action: https://stackoverflow.com/a/74636176 > > > > At least it’s behaving the same in iOS 17.6 (latest) Also confirmed on iOS18.1 My two Cents: I would also love to see it work that keyboard is automatically shown as soon as create a new transaction. (== to fix this bug) Regarding the philosophy: Maybe we should let the user decide how it should behave and offer a switch in the options area? Just one idea
GiteaMirror commented 2026-02-28 19:26:10 -06:00
Author
Owner
Copy Link

@WojtekFus commented on GitHub (Dec 1, 2024):

Confirmed on iOS 18.1 - I'm totally with MarcAroni81 on this one. The keyboard should open automatically to mirror the Android experience (also mirroring how nYNAB handles it). Reaching all the way to the top of the screen as a first step during entering a transaction is counter-productive, at least as a default action. Simple flow first - then adding option to customize the flow for advanced user would be a way to go IMHO.

Looking forward to the fix on this one - current state of the iOS Add Transaction flow is really tedious and buggy.

Having said that - I love Actual and I'm thankful for all the work done on the app. It's really an amazing solution and I'm happy to see it grow in such a agile manner recently. Kudos to the devs!

@WojtekFus commented on GitHub (Dec 1, 2024): Confirmed on iOS 18.1 - I'm totally with MarcAroni81 on this one. The keyboard **should open automatically** to mirror the Android experience (also mirroring how nYNAB handles it). Reaching all the way to the top of the screen as a first step during entering a transaction is counter-productive, at least as a default action. Simple flow first - then adding option to customize the flow for advanced user would be a way to go IMHO. Looking forward to the fix on this one - current state of the iOS Add Transaction flow is really tedious and buggy. Having said that - I love Actual and I'm thankful for all the work done on the app. It's really an amazing solution and I'm happy to see it grow in such a agile manner recently. Kudos to the devs!
GiteaMirror commented 2026-02-28 19:26:10 -06:00
Author
Owner
Copy Link

@danielkuhnen commented on GitHub (Dec 2, 2024):

This is a known issue with Progressive Web Apps (PWAs) on iOS due to the limited support and specific quirks of Safari and WebKit. We have a couple of options to fix this:

  • Disable the focus on the amount (only in iOS). That way, the keyboard will open when we touch in the amount (user gesture), reducing one step (only one touch to open the keyboard instead of two now)
  • Try to forcefully trigger a click (maybe manually simulating a click event on the input can ensure the keyboard opens)
@danielkuhnen commented on GitHub (Dec 2, 2024): This is a known issue with Progressive Web Apps (PWAs) on iOS due to the limited support and specific quirks of Safari and WebKit. We have a couple of options to fix this: - Disable the focus on the amount (only in iOS). That way, the keyboard will open when we touch in the amount (user gesture), reducing one step (only one touch to open the keyboard instead of two now) - Try to forcefully trigger a click (maybe manually simulating a click event on the input can ensure the keyboard opens)
GiteaMirror commented 2026-02-28 19:26:10 -06:00
Author
Owner
Copy Link

@dojoca commented on GitHub (Dec 10, 2024):

Confirmed that this is happening on my device too - ios 18.1, iphone se 2020. Wish I could help fix it, I've recently switched over from YNAB4 and I love ActualBudget. Fantastic software!

@dojoca commented on GitHub (Dec 10, 2024): Confirmed that this is happening on my device too - ios 18.1, iphone se 2020. Wish I could help fix it, I've recently switched over from YNAB4 and I love ActualBudget. Fantastic software!
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 bug responsive 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#947
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?