diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json index c53176fac8..d696a4540a 100644 --- a/packages/desktop-client/package.json +++ b/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", diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx index ec20530193..2b4ce69b4c 100644 --- a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx +++ b/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]); diff --git a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx index 7dc04f1552..3f9c650fdd 100644 --- a/packages/desktop-client/src/components/modals/EnvelopeBudgetMenuModal.tsx +++ b/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) { diff --git a/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx b/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx index bcb0353318..5d3a99621d 100644 --- a/packages/desktop-client/src/components/modals/TrackingBudgetMenuModal.tsx +++ b/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) { diff --git a/packages/loot-core/package.json b/packages/loot-core/package.json index 583c37bda0..edccefdbb9 100644 --- a/packages/loot-core/package.json +++ b/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": { diff --git a/packages/loot-core/src/client/__mocks__/platform.web.ts b/packages/loot-core/src/client/__mocks__/platform.web.ts index a65bd002e6..5417b58c65 100644 --- a/packages/loot-core/src/client/__mocks__/platform.web.ts +++ b/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; diff --git a/packages/loot-core/src/client/platform.electron.ts b/packages/loot-core/src/client/platform.electron.ts index aee5e87a99..fc10d98eee 100644 --- a/packages/loot-core/src/client/platform.electron.ts +++ b/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; diff --git a/packages/loot-core/src/client/platform.ts b/packages/loot-core/src/client/platform.ts index a65bd002e6..5417b58c65 100644 --- a/packages/loot-core/src/client/platform.ts +++ b/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; diff --git a/packages/loot-core/src/client/platform.web.ts b/packages/loot-core/src/client/platform.web.ts index 7d81d477d5..dfae65bfe5 100644 --- a/packages/loot-core/src/client/platform.web.ts +++ b/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'; diff --git a/upcoming-release-notes/4651.md b/upcoming-release-notes/4651.md new file mode 100644 index 0000000000..22670fceb4 --- /dev/null +++ b/upcoming-release-notes/4651.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [MatissJanis] +--- + +Mobile: fix focusing on budget amount in iOS. diff --git a/yarn.lock b/yarn.lock index 5685248582..3908f7af5e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -201,7 +201,6 @@ __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" @@ -14488,6 +14487,7 @@ __metadata: terser-webpack-plugin: "npm:^5.3.10" ts-node: "npm:^10.9.2" typescript: "npm:^5.8.2" + ua-parser-js: "npm:^2.0.0" uuid: "npm:^9.0.1" webpack: "npm:^5.94.0" webpack-bundle-analyzer: "npm:^4.10.1"