🐛 (mobile) fix amount input requiring two clicks on safari mobile (#4182

)
actualbudget · Jan 18, 2025 · 87c2604 · 87c2604
1 parent 6070166
commit 87c2604
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 8 deletions.
diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
@@ -70,6 +70,7 @@
     "sass": "^1.70.0",
     "swc-loader": "^0.2.6",
     "terser-webpack-plugin": "^5.3.10",
+    "ua-parser-js": "^2.0.0",
     "usehooks-ts": "^3.0.1",
     "uuid": "^9.0.1",
     "vite": "^5.2.14",

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
@@ -16,13 +16,14 @@ import {
   parseISO,
   isValid as isValidDate,
 } from 'date-fns';
+import { UAParser } from 'ua-parser-js';
 
 import { pushModal } from 'loot-core/client/actions';
 import { setLastTransaction } from 'loot-core/client/queries/queriesSlice';
-import { runQuery } from 'loot-core/src/client/query-helpers';
-import { send } from 'loot-core/src/platform/client/fetch';
-import * as monthUtils from 'loot-core/src/shared/months';
-import { q } from 'loot-core/src/shared/query';
+import { runQuery } from 'loot-core/client/query-helpers';
+import { send } from 'loot-core/platform/client/fetch';
+import * as monthUtils from 'loot-core/shared/months';
+import { q } from 'loot-core/shared/query';
 import {
   ungroupTransactions,
   updateTransaction,
@@ -31,7 +32,7 @@ import {
   addSplitTransaction,
   deleteTransaction,
   makeChild,
-} from 'loot-core/src/shared/transactions';
+} from 'loot-core/shared/transactions';
 import {
   titleFirst,
   integerToCurrency,
@@ -40,7 +41,7 @@ import {
   getChangedValues,
   diffItems,
   groupById,
-} from 'loot-core/src/shared/util';
+} from 'loot-core/shared/util';
 
 import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
@@ -69,6 +70,9 @@ import { getPrettyPayee } from '../utils';
 
 import { FocusableAmountInput } from './FocusableAmountInput';
 
+const agent = UAParser(navigator.userAgent);
+const isIOSAgent = agent.browser.name === 'Mobile Safari';
+
 function getFieldName(transactionId, field) {
   return `${field}-${transactionId}`;
 }
@@ -465,7 +469,11 @@ const TransactionEditInner = memo(function TransactionEditInner({
 
   const { editingField, onRequestActiveEdit, onClearActiveEdit } =
     useSingleActiveEditForm();
-  const [totalAmountFocused, setTotalAmountFocused] = useState(true);
+  const [totalAmountFocused, setTotalAmountFocused] = useState(
+    // iOS does not support automatically opening up the keyboard for the
+    // total amount field. Hence we should not focus on it on page render.
+    !isIOSAgent,
+  );
   const childTransactionElementRefMap = useRef({});
   const hasAccountChanged = useRef(false);
 
@@ -482,7 +490,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
   const isInitialMount = useInitialMount();
 
   useEffect(() => {
-    if (isInitialMount && isAdding) {
+    if (isInitialMount && isAdding && !isIOSAgent) {
       onTotalAmountEdit();
     }
   }, [isAdding, isInitialMount, onTotalAmountEdit]);

diff --git a/upcoming-release-notes/4182.md b/upcoming-release-notes/4182.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Fix amount input requiring two clicks on safari mobile
diff --git a/yarn.lock b/yarn.lock
@@ -123,6 +123,7 @@ __metadata:
     sass: "npm:^1.70.0"
     swc-loader: "npm:^0.2.6"
     terser-webpack-plugin: "npm:^5.3.10"
+    ua-parser-js: "npm:^2.0.0"
     usehooks-ts: "npm:^3.0.1"
     uuid: "npm:^9.0.1"
     vite: "npm:^5.2.14"
@@ -8871,6 +8872,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"detect-europe-js@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "detect-europe-js@npm:0.1.2"
+  checksum: 10/3d6dcf6ac451baa3050ff00e05cf1841e208bc4f27c69ec2c8df5fdf2375403cf2911f8059c9c18f258d7e176c8d308e4e0e8552500d0e30a9e95a514366ef13
+  languageName: node
+  linkType: hard
+
 "detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.1":
   version: 2.0.2
   resolution: "detect-libc@npm:2.0.2"
@@ -12300,6 +12308,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-standalone-pwa@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "is-standalone-pwa@npm:0.1.1"
+  checksum: 10/bbd2ee7cbea985139f66fe8785e7699f52311e9c14d74190659885222b79dd1e8845b02f69b9221a23a2b4b00e8d4bea0a5a2603b2f26cb6d2071d46093ccf84
+  languageName: node
+  linkType: hard
+
 "is-stream@npm:^1.0.0, is-stream@npm:^1.1.0":
   version: 1.1.0
   resolution: "is-stream@npm:1.1.0"
@@ -19040,6 +19055,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ua-is-frozen@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "ua-is-frozen@npm:0.1.2"
+  checksum: 10/0113bed77d437a3752323175f01057dd01911506225e9d33799799188a89a230ab63d2445b096d4399ea8eb94e3163608f7ac2425fb8edd0844d891490607e14
+  languageName: node
+  linkType: hard
+
+"ua-parser-js@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "ua-parser-js@npm:2.0.0"
+  dependencies:
+    detect-europe-js: "npm:^0.1.2"
+    is-standalone-pwa: "npm:^0.1.1"
+    ua-is-frozen: "npm:^0.1.2"
+  bin:
+    ua-parser-js: script/cli.js
+  checksum: 10/9f8f82509c5aad02d87c2a76a69c19d5a3079b8eb0156fa5a603f20db14727357922dba32647dde41b6bc3511b3e80ba563aa3093694e16dd2b8e10bd40ff8a9
+  languageName: node
+  linkType: hard
+
 "ufo@npm:^1.3.0":
   version: 1.3.2
   resolution: "ufo@npm:1.3.2"