🐛 (mobile) fix for iOS - keyboard focus when editing budget (#4651)

packages/desktop-client/package.json

@@ -74,7 +74,6 @@
     "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",

packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx

@@ -29,9 +29,9 @@ import {
   parseISO,
   isValid as isValidDate,
 } from 'date-fns';
-import { UAParser } from 'ua-parser-js';
 
 import { pushModal } from 'loot-core/client/modals/modalsSlice';
+import * as Platform from 'loot-core/client/platform';
 import { setLastTransaction } from 'loot-core/client/queries/queriesSlice';
 import { runQuery } from 'loot-core/client/query-helpers';
 import { send } from 'loot-core/platform/client/fetch';
@@ -75,9 +75,6 @@ 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}`;
 }
@@ -491,7 +488,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
   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,
+    !Platform.isIOSAgent,
   );
   const childTransactionElementRefMap = useRef({});
   const hasAccountChanged = useRef(false);
@@ -509,7 +506,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
   const isInitialMount = useInitialMount();
 
   useEffect(() => {
-    if (isInitialMount && isAdding && !isIOSAgent) {
+    if (isInitialMount && isAdding && !Platform.isIOSAgent) {
       onTotalAmountEdit();
     }
   }, [isAdding, isInitialMount, onTotalAmountEdit]);

packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx

@@ -7,6 +7,7 @@ import { theme } from '@actual-app/components/theme';
 import { View } from '@actual-app/components/view';
 
 import { type Modal as ModalType } from 'loot-core/client/modals/modalsSlice';
+import * as Platform from 'loot-core/client/platform';
 import { envelopeBudget } from 'loot-core/client/queries';
 import { amountToInteger, integerToAmount } from 'loot-core/shared/util';
 
@@ -52,7 +53,11 @@ export function EnvelopeBudgetMenuModal({
   };
 
   useEffect(() => {
-    setAmountFocused(true);
+    // iOS does not support automatically opening up the keyboard for the
+    // total amount field. Hence we should not focus on it on page render.
+    if (!Platform.isIOSAgent) {
+      setAmountFocused(true);
+    }
   }, []);
 
   if (!category) {

packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx

@@ -7,6 +7,7 @@ import { theme } from '@actual-app/components/theme';
 import { View } from '@actual-app/components/view';
 
 import { type Modal as ModalType } from 'loot-core/client/modals/modalsSlice';
+import * as Platform from 'loot-core/client/platform';
 import { trackingBudget } from 'loot-core/client/queries';
 import { amountToInteger, integerToAmount } from 'loot-core/shared/util';
 
@@ -52,7 +53,11 @@ export function TrackingBudgetMenuModal({
   };
 
   useEffect(() => {
-    setAmountFocused(true);
+    // iOS does not support automatically opening up the keyboard for the
+    // total amount field. Hence we should not focus on it on page render.
+    if (!Platform.isIOSAgent) {
+      setAmountFocused(true);
+    }
   }, []);
 
   if (!category) {

packages/loot-core/package.json

@@ -36,6 +36,7 @@
     "mitt": "^3.0.1",
     "reselect": "^4.1.8",
     "slash": "3.0.0",
+    "ua-parser-js": "^2.0.0",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

packages/loot-core/src/client/__mocks__/platform.web.ts

@@ -3,3 +3,5 @@ export const isPlaywright = false;
 export const OS: 'windows' | 'mac' | 'linux' | 'unknown' = 'unknown';
 export const env: 'web' | 'mobile' | 'unknown' = 'unknown';
 export const isBrowser = false;
+
+export const isIOSAgent = false;

packages/loot-core/src/client/platform.electron.ts

@@ -15,3 +15,5 @@ export const OS: 'windows' | 'mac' | 'linux' | 'unknown' = isWindows
       : 'unknown';
 export const env: 'web' | 'mobile' | 'unknown' = 'unknown';
 export const isBrowser = false;
+
+export const isIOSAgent = false;

packages/loot-core/src/client/platform.ts

@@ -3,3 +3,5 @@ export const isPlaywright = false;
 export const OS: 'windows' | 'mac' | 'linux' | 'unknown' = 'unknown';
 export const env: 'web' | 'mobile' | 'unknown' = 'unknown';
 export const isBrowser = false;
+
+export const isIOSAgent = false;

packages/loot-core/src/client/platform.web.ts

@@ -1,3 +1,5 @@
+import { UAParser } from 'ua-parser-js';
+
 const isWindows =
   navigator.platform && navigator.platform.toLowerCase() === 'win32';
 
@@ -13,3 +15,6 @@ export const OS: 'windows' | 'mac' | 'linux' | 'unknown' = isWindows
     : 'linux';
 export const env: 'web' | 'mobile' | 'unknown' = 'web';
 export const isBrowser = true;
+
+const agent = UAParser(navigator.userAgent);
+export const isIOSAgent = agent.browser.name === 'Mobile Safari';