From d20414188b36ec7b19305cefa7bc860db9f91f62 Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Wed, 3 Jul 2024 09:47:50 -0500
Subject: [PATCH 1/6] Automatically focus inputs, or the primary button, in
 modals.

---
 .../src/components/accounts/Account.jsx       |  2 +-
 .../components/accounts/AccountSyncCheck.jsx  |  2 +-
 .../src/components/accounts/Reconcile.jsx     |  2 +-
 .../src/components/manager/ImportActual.tsx   |  1 +
 .../src/components/manager/ImportYNAB4.tsx    |  1 +
 .../src/components/manager/ImportYNAB5.tsx    |  1 +
 .../src/components/manager/WelcomeScreen.tsx  |  2 +-
 .../components/modals/CloseAccountModal.tsx   |  1 +
 .../modals/ConfirmTransactionDelete.tsx       | 23 +++++++++--------
 .../modals/ConfirmTransactionEdit.tsx         | 21 +++++++++-------
 .../modals/ConfirmUnlinkAccount.tsx           | 21 +++++++++-------
 .../components/modals/CreateAccountModal.tsx  | 25 +++++++++++--------
 .../modals/GoCardlessInitialise.tsx           | 21 +++++++++-------
 .../components/modals/ImportTransactions.jsx  |  1 +
 .../components/modals/MergeUnusedPayees.jsx   |  1 +
 .../components/modals/SimpleFinInitialise.tsx |  1 +
 .../components/reports/SaveReportDelete.tsx   |  6 ++---
 .../schedules/PostsOfflineNotification.jsx    |  2 +-
 .../components/schedules/ScheduleDetails.jsx  | 21 +++++++++-------
 .../src/components/schedules/ScheduleLink.tsx | 19 ++++++++------
 .../select/RecurringSchedulePicker.jsx        | 19 ++++++++------
 21 files changed, 112 insertions(+), 81 deletions(-)

diff --git a/packages/desktop-client/src/components/accounts/Account.jsx b/packages/desktop-client/src/components/accounts/Account.jsx
index 5ae43fe427..d66496c375 100644
--- a/packages/desktop-client/src/components/accounts/Account.jsx
+++ b/packages/desktop-client/src/components/accounts/Account.jsx
@@ -73,7 +73,7 @@ function EmptyMessage({ onAdd }) {
           manage it locally yourself.
         </Text>
 
-        <Button type="primary" style={{ marginTop: 20 }} onClick={onAdd}>
+        <Button type="primary" autoFocus style={{ marginTop: 20 }} onClick={onAdd}>
           Add account
         </Button>
 
diff --git a/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx b/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx
index 989e585c76..587618bb6b 100644
--- a/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx
+++ b/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx
@@ -130,7 +130,7 @@ export function AccountSyncCheck() {
           {showAuth ? (
             <>
               <Button onClick={unlink}>Unlink</Button>
-              <Button type="primary" onClick={reauth} style={{ marginLeft: 5 }}>
+              <Button type="primary" autoFocus onClick={reauth} style={{ marginLeft: 5 }}>
                 Reauthorize
               </Button>
             </>
diff --git a/packages/desktop-client/src/components/accounts/Reconcile.jsx b/packages/desktop-client/src/components/accounts/Reconcile.jsx
index d80668b8e1..b1d721e769 100644
--- a/packages/desktop-client/src/components/accounts/Reconcile.jsx
+++ b/packages/desktop-client/src/components/accounts/Reconcile.jsx
@@ -78,7 +78,7 @@ export function ReconcilingMessage({
           </View>
         )}
         <View style={{ marginLeft: 15 }}>
-          <Button type="primary" onClick={onDone}>
+          <Button type="primary" autoFocus onClick={onDone}>
             Done Reconciling
           </Button>
         </View>
diff --git a/packages/desktop-client/src/components/manager/ImportActual.tsx b/packages/desktop-client/src/components/manager/ImportActual.tsx
index a6863deb53..a7433092c1 100644
--- a/packages/desktop-client/src/components/manager/ImportActual.tsx
+++ b/packages/desktop-client/src/components/manager/ImportActual.tsx
@@ -84,6 +84,7 @@ export function ImportActual({ modalProps }: ImportProps) {
             <View style={{ alignSelf: 'center' }}>
               <ButtonWithLoading
                 type="primary"
+                autoFocus
                 loading={importing}
                 onClick={onImport}
               >
diff --git a/packages/desktop-client/src/components/manager/ImportYNAB4.tsx b/packages/desktop-client/src/components/manager/ImportYNAB4.tsx
index 338a5dd5e2..d215c2e77c 100644
--- a/packages/desktop-client/src/components/manager/ImportYNAB4.tsx
+++ b/packages/desktop-client/src/components/manager/ImportYNAB4.tsx
@@ -73,6 +73,7 @@ export function ImportYNAB4({ modalProps }: ImportProps) {
             <View>
               <ButtonWithLoading
                 type="primary"
+                autoFocus
                 loading={importing}
                 onClick={onImport}
               >
diff --git a/packages/desktop-client/src/components/manager/ImportYNAB5.tsx b/packages/desktop-client/src/components/manager/ImportYNAB5.tsx
index da108febd9..2606cd819d 100644
--- a/packages/desktop-client/src/components/manager/ImportYNAB5.tsx
+++ b/packages/desktop-client/src/components/manager/ImportYNAB5.tsx
@@ -83,6 +83,7 @@ export function ImportYNAB5({ modalProps }: ImportProps) {
             <View>
               <ButtonWithLoading
                 type="primary"
+                autoFocus
                 loading={importing}
                 onClick={onImport}
               >
diff --git a/packages/desktop-client/src/components/manager/WelcomeScreen.tsx b/packages/desktop-client/src/components/manager/WelcomeScreen.tsx
index ce72529ec5..912ddfe702 100644
--- a/packages/desktop-client/src/components/manager/WelcomeScreen.tsx
+++ b/packages/desktop-client/src/components/manager/WelcomeScreen.tsx
@@ -75,7 +75,7 @@ export function WelcomeScreen() {
           <Button onClick={() => createBudget({ testMode: true })}>
             View demo
           </Button>
-          <Button type="primary" onClick={() => createBudget()}>
+          <Button type="primary" autoFocus onClick={() => createBudget()}>
             Start fresh
           </Button>
         </View>
diff --git a/packages/desktop-client/src/components/modals/CloseAccountModal.tsx b/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
index fb9d8411f4..c608b90f14 100644
--- a/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
+++ b/packages/desktop-client/src/components/modals/CloseAccountModal.tsx
@@ -149,6 +149,7 @@ export function CloseAccountModal({
                     value={transferAccountId}
                     inputProps={{
                       placeholder: 'Select account...',
+                      autoFocus: true,
                       ...(isNarrowWidth && {
                         value: transferAccount?.name || '',
                         style: {
diff --git a/packages/desktop-client/src/components/modals/ConfirmTransactionDelete.tsx b/packages/desktop-client/src/components/modals/ConfirmTransactionDelete.tsx
index 6d465b8e0e..c125df9b2b 100644
--- a/packages/desktop-client/src/components/modals/ConfirmTransactionDelete.tsx
+++ b/packages/desktop-client/src/components/modals/ConfirmTransactionDelete.tsx
@@ -7,6 +7,7 @@ import { Modal } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
+import { InitialFocus } from '../common/InitialFocus';
 
 type ConfirmTransactionDeleteProps = {
   modalProps: CommonModalProps;
@@ -43,16 +44,18 @@ export function ConfirmTransactionDelete({
           >
             Cancel
           </Button>
-          <Button
-            type="primary"
-            style={narrowButtonStyle}
-            onClick={() => {
-              onConfirm();
-              modalProps.onClose();
-            }}
-          >
-            Delete
-          </Button>
+          <InitialFocus>
+            <Button
+              type="primary"
+              style={narrowButtonStyle}
+              onClick={() => {
+                onConfirm();
+                modalProps.onClose();
+              }}
+            >
+              Delete
+            </Button>
+          </InitialFocus>
         </View>
       </View>
     </Modal>
diff --git a/packages/desktop-client/src/components/modals/ConfirmTransactionEdit.tsx b/packages/desktop-client/src/components/modals/ConfirmTransactionEdit.tsx
index 6fb4c80077..eb0ca6abc6 100644
--- a/packages/desktop-client/src/components/modals/ConfirmTransactionEdit.tsx
+++ b/packages/desktop-client/src/components/modals/ConfirmTransactionEdit.tsx
@@ -6,6 +6,7 @@ import { Button } from '../common/Button';
 import { Modal } from '../common/Modal';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
+import { InitialFocus } from '../common/InitialFocus';
 
 type ConfirmTransactionEditProps = {
   modalProps: Partial<CommonModalProps>;
@@ -74,15 +75,17 @@ export function ConfirmTransactionEdit({
               <Button style={{ marginRight: 10 }} onClick={modalProps.onClose}>
                 Cancel
               </Button>
-              <Button
-                type="primary"
-                onClick={() => {
-                  modalProps.onClose();
-                  onConfirm();
-                }}
-              >
-                Confirm
-              </Button>
+              <InitialFocus>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    modalProps.onClose();
+                    onConfirm();
+                  }}
+                >
+                  Confirm
+                </Button>
+              </InitialFocus>
             </View>
           </View>
         </View>
diff --git a/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx b/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx
index 68174829a6..b496de1de6 100644
--- a/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx
+++ b/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx
@@ -5,6 +5,7 @@ import { Modal } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
+import { InitialFocus } from '../common/InitialFocus';
 
 type ConfirmUnlinkAccountProps = {
   modalProps: CommonModalProps;
@@ -39,15 +40,17 @@ export function ConfirmUnlinkAccount({
             <Button style={{ marginRight: 10 }} onClick={modalProps.onClose}>
               Cancel
             </Button>
-            <Button
-              type="primary"
-              onClick={() => {
-                onUnlink();
-                modalProps.onClose();
-              }}
-            >
-              Unlink
-            </Button>
+            <InitialFocus>
+              <Button
+                type="primary"
+                onClick={() => {
+                  onUnlink();
+                  modalProps.onClose();
+                }}
+              >
+                Unlink
+              </Button>
+            </InitialFocus>
           </View>
         </View>
       )}
diff --git a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
index 4f042cd1d5..ddc40a50cc 100644
--- a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
+++ b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
@@ -20,6 +20,7 @@ import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
 import { Tooltip } from '../tooltips';
+import { InitialFocus } from '../common/InitialFocus';
 
 type CreateAccountProps = {
   modalProps: CommonModalProps;
@@ -183,17 +184,19 @@ export function CreateAccountModal({
         <View style={{ maxWidth: 500, gap: 30, color: theme.pageText }}>
           {upgradingAccountId == null && (
             <View style={{ gap: 10 }}>
-              <Button
-                type="primary"
-                style={{
-                  padding: '10px 0',
-                  fontSize: 15,
-                  fontWeight: 600,
-                }}
-                onClick={onCreateLocalAccount}
-              >
-                Create local account
-              </Button>
+              <InitialFocus>
+                <Button
+                  type="primary"
+                  style={{
+                    padding: '10px 0',
+                    fontSize: 15,
+                    fontWeight: 600,
+                  }}
+                  onClick={onCreateLocalAccount}
+                >
+                  Create local account
+                </Button>
+              </InitialFocus>
               <View style={{ lineHeight: '1.4em', fontSize: 15 }}>
                 <Text>
                   <strong>Create a local account</strong> if you want to add
diff --git a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx b/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
index 8857962e0e..0c5ce8e121 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
+++ b/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
@@ -12,6 +12,7 @@ import type { ModalProps } from '../common/Modal';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { FormField, FormLabel } from '../forms';
+import { InitialFocus } from '../common/InitialFocus';
 
 type GoCardlessInitialiseProps = {
   modalProps?: Partial<ModalProps>;
@@ -70,15 +71,17 @@ export const GoCardlessInitialise = ({
 
         <FormField>
           <FormLabel title="Secret ID:" htmlFor="secret-id-field" />
-          <Input
-            id="secret-id-field"
-            type="password"
-            value={secretId}
-            onChangeValue={value => {
-              setSecretId(value);
-              setIsValid(true);
-            }}
-          />
+          <InitialFocus>
+            <Input
+              id="secret-id-field"
+              type="password"
+              value={secretId}
+              onChangeValue={value => {
+                setSecretId(value);
+                setIsValid(true);
+              }}
+            />
+          </InitialFocus>
         </FormField>
 
         <FormField>
diff --git a/packages/desktop-client/src/components/modals/ImportTransactions.jsx b/packages/desktop-client/src/components/modals/ImportTransactions.jsx
index 26abe34e46..5d0eb440bd 100644
--- a/packages/desktop-client/src/components/modals/ImportTransactions.jsx
+++ b/packages/desktop-client/src/components/modals/ImportTransactions.jsx
@@ -1285,6 +1285,7 @@ export function ImportTransactions({ modalProps, options }) {
         >
           <ButtonWithLoading
             type="primary"
+            autoFocus
             disabled={transactions.length === 0}
             loading={loadingState === 'importing'}
             onClick={onImport}
diff --git a/packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx b/packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx
index 78d0efc178..b5f65aa0a7 100644
--- a/packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx
+++ b/packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx
@@ -158,6 +158,7 @@ export function MergeUnusedPayees({ modalProps, payeeIds, targetPayeeId }) {
             <ModalButtons style={{ marginTop: 20 }} focusButton>
               <Button
                 type="primary"
+                autoFocus
                 isSubmit={false}
                 style={{ marginRight: 10 }}
                 onClick={onMerge}
diff --git a/packages/desktop-client/src/components/modals/SimpleFinInitialise.tsx b/packages/desktop-client/src/components/modals/SimpleFinInitialise.tsx
index 6eeff3281b..1671b5a375 100644
--- a/packages/desktop-client/src/components/modals/SimpleFinInitialise.tsx
+++ b/packages/desktop-client/src/components/modals/SimpleFinInitialise.tsx
@@ -80,6 +80,7 @@ export const SimpleFinInitialise = ({
       <ModalButtons>
         <ButtonWithLoading
           type="primary"
+          autoFocus
           loading={isLoading}
           onClick={onSubmit}
         >
diff --git a/packages/desktop-client/src/components/reports/SaveReportDelete.tsx b/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
index 3a5b95fedb..6b896c630c 100644
--- a/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
+++ b/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
@@ -21,7 +21,7 @@ export function SaveReportDelete({
     <>
       <View style={{ align: 'center' }}>
         <Text style={{ color: theme.errorText, marginBottom: 5 }}>
-          Do you want to delete report:
+          Are you sure you want to delete report:
         </Text>
         <View>{name}</View>
       </View>
@@ -33,10 +33,10 @@ export function SaveReportDelete({
         style={{ marginTop: 15 }}
       >
         <View style={{ flex: 1 }} />
-        <Button type="primary" onClick={onDelete}>
+        <Button type="primary" autoFocus onClick={onDelete}>
           Yes
         </Button>
-        <Button type="primary" onClick={onClose}>
+        <Button onClick={onClose}>
           No
         </Button>
       </Stack>
diff --git a/packages/desktop-client/src/components/schedules/PostsOfflineNotification.jsx b/packages/desktop-client/src/components/schedules/PostsOfflineNotification.jsx
index 6073a87bab..dcfc71cabe 100644
--- a/packages/desktop-client/src/components/schedules/PostsOfflineNotification.jsx
+++ b/packages/desktop-client/src/components/schedules/PostsOfflineNotification.jsx
@@ -69,7 +69,7 @@ export function PostsOfflineNotification({ modalProps, actions }) {
         spacing={2}
       >
         <Button onClick={actions.popModal}>Decide later</Button>
-        <Button type="primary" onClick={onPost}>
+        <Button type="primary" autoFocus onClick={onPost}>
           Post transactions
         </Button>
       </Stack>
diff --git a/packages/desktop-client/src/components/schedules/ScheduleDetails.jsx b/packages/desktop-client/src/components/schedules/ScheduleDetails.jsx
index 442676cb3a..292672233d 100644
--- a/packages/desktop-client/src/components/schedules/ScheduleDetails.jsx
+++ b/packages/desktop-client/src/components/schedules/ScheduleDetails.jsx
@@ -16,6 +16,7 @@ import { theme } from '../../style';
 import { AccountAutocomplete } from '../autocomplete/AccountAutocomplete';
 import { PayeeAutocomplete } from '../autocomplete/PayeeAutocomplete';
 import { Button } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Modal } from '../common/Modal';
 import { Stack } from '../common/Stack';
 import { Text } from '../common/Text';
@@ -456,15 +457,17 @@ export function ScheduleDetails({ modalProps, actions, id, transaction }) {
       <Stack direction="row" style={{ marginTop: 10 }}>
         <FormField style={{ flex: 1 }}>
           <FormLabel title="Schedule Name" htmlFor="name-field" />
-          <GenericInput
-            field="string"
-            type="string"
-            value={state.fields.name}
-            multi={false}
-            onChange={e => {
-              dispatch({ type: 'set-field', field: 'name', value: e });
-            }}
-          />
+          <InitialFocus>
+            <GenericInput
+              field="string"
+              type="string"
+              value={state.fields.name}
+              multi={false}
+              onChange={e => {
+                dispatch({ type: 'set-field', field: 'name', value: e });
+              }}
+            />
+          </InitialFocus>
         </FormField>
       </Stack>
       <Stack direction="row" style={{ marginTop: 20 }}>
diff --git a/packages/desktop-client/src/components/schedules/ScheduleLink.tsx b/packages/desktop-client/src/components/schedules/ScheduleLink.tsx
index 5743087d3f..ea6de5bdfe 100644
--- a/packages/desktop-client/src/components/schedules/ScheduleLink.tsx
+++ b/packages/desktop-client/src/components/schedules/ScheduleLink.tsx
@@ -18,6 +18,7 @@ import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
 
 import { ROW_HEIGHT, SchedulesTable } from './SchedulesTable';
+import { InitialFocus } from '../common/InitialFocus';
 
 export function ScheduleLink({
   modalProps,
@@ -80,14 +81,16 @@ export function ScheduleLink({
             : `this transaction belongs`}{' '}
           to:
         </Text>
-        <Search
-          inputRef={searchInput}
-          isInModal
-          width={300}
-          placeholder="Filter schedules…"
-          value={filter}
-          onChange={setFilter}
-        />
+        <InitialFocus>
+          <Search
+            inputRef={searchInput}
+            isInModal
+            width={300}
+            placeholder="Filter schedules…"
+            value={filter}
+            onChange={setFilter}
+          />
+        </InitialFocus>
         {ids.length === 1 && (
           <Button
             type="primary"
diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx b/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx
index 4c29f179bb..be38ef4107 100644
--- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx
+++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx
@@ -8,6 +8,7 @@ import { useDateFormat } from '../../hooks/useDateFormat';
 import { SvgAdd, SvgSubtract } from '../../icons/v0';
 import { theme } from '../../style';
 import { Button } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Input } from '../common/Input';
 import { Popover } from '../common/Popover';
 import { Select } from '../common/Select';
@@ -311,14 +312,16 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) {
     <>
       <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
         <label htmlFor="start">From</label>
-        <DateSelect
-          id="start"
-          inputProps={{ placeholder: 'Start Date' }}
-          value={config.start}
-          onSelect={value => updateField('start', value)}
-          containerProps={{ style: { width: 100 } }}
-          dateFormat={dateFormat}
-        />
+        <InitialFocus>
+          <DateSelect
+            id="start"
+            inputProps={{ placeholder: 'Start Date' }}
+            value={config.start}
+            onSelect={value => updateField('start', value)}
+            containerProps={{ style: { width: 100 } }}
+            dateFormat={dateFormat}
+          />
+        </InitialFocus>
         <Select
           id="repeat_end_dropdown"
           bare

From 48e73c2123ce93bd12f9a48491cd18262461a5d3 Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Wed, 3 Jul 2024 10:00:26 -0500
Subject: [PATCH 2/6] Set focus on more modals.

---
 .../src/components/modals/ConfirmCategoryDelete.tsx           | 3 ++-
 .../src/components/modals/GoCardlessExternalMsg.tsx           | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx
index d12e4306d1..8103dc67b0 100644
--- a/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx
+++ b/packages/desktop-client/src/components/modals/ConfirmCategoryDelete.tsx
@@ -62,7 +62,7 @@ export function ConfirmCategoryDelete({
           {group ? (
             <Block>
               Categories in the group <strong>{group.name}</strong> are used by
-              existing transaction
+              existing transactions
               {!isIncome &&
                 ' or it has a positive leftover balance currently'}.{' '}
               <strong>Are you sure you want to delete it?</strong> If so, you
@@ -109,6 +109,7 @@ export function ConfirmCategoryDelete({
                         }))
                 }
                 value={transferCategory}
+                focused={true}
                 inputProps={{
                   placeholder: 'Select category...',
                 }}
diff --git a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx
index 1a0ff3d571..8c963eb188 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx
+++ b/packages/desktop-client/src/components/modals/GoCardlessExternalMsg.tsx
@@ -214,6 +214,7 @@ export function GoCardlessExternalMsg({
         <View style={{ flexDirection: 'row', gap: 10, alignItems: 'center' }}>
           <Button
             type="primary"
+            autoFocus
             style={{
               padding: '10px 0',
               fontSize: 15,
@@ -272,6 +273,7 @@ export function GoCardlessExternalMsg({
           ) : success ? (
             <Button
               type="primary"
+              autoFocus
               style={{
                 padding: '10px 0',
                 fontSize: 15,
@@ -289,7 +291,7 @@ export function GoCardlessExternalMsg({
               <Paragraph style={{ color: theme.errorText }}>
                 GoCardless integration has not yet been configured.
               </Paragraph>
-              <Button type="primary" onClick={onGoCardlessInit}>
+              <Button type="primary" autoFocus onClick={onGoCardlessInit}>
                 Configure GoCardless integration
               </Button>
             </>

From bd94dfc6747fc818495c9a1f69a508ad814390dc Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Wed, 3 Jul 2024 10:15:58 -0500
Subject: [PATCH 3/6] focus mobile transaction edits

---
 .../src/components/mobile/transactions/TransactionEdit.jsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
index 8018f1ef7b..3665431adc 100644
--- a/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
+++ b/packages/desktop-client/src/components/mobile/transactions/TransactionEdit.jsx
@@ -456,7 +456,7 @@ const TransactionEditInner = memo(function TransactionEditInner({
 
   const { editingField, onRequestActiveEdit, onClearActiveEdit } =
     useSingleActiveEditForm();
-  const [totalAmountFocused, setTotalAmountFocused] = useState(false);
+  const [totalAmountFocused, setTotalAmountFocused] = useState(true);
   const childTransactionElementRefMap = useRef({});
 
   const payeesById = useMemo(() => groupById(payees), [payees]);

From 4695676b237dd09224ad42244dcbbc8b54e06425 Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Wed, 3 Jul 2024 13:00:08 -0500
Subject: [PATCH 4/6] add release note

---
 upcoming-release-notes/2974.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 upcoming-release-notes/2974.md

diff --git a/upcoming-release-notes/2974.md b/upcoming-release-notes/2974.md
new file mode 100644
index 0000000000..ec64722203
--- /dev/null
+++ b/upcoming-release-notes/2974.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [psybers]
+---
+
+Fix: Automatically focus inputs, or the primary button, in modals.

From 88541611c1ad558ba9a30cbb75a4bd948694b65f Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Wed, 3 Jul 2024 14:14:53 -0500
Subject: [PATCH 5/6] fix linter

---
 .../desktop-client/src/components/accounts/Account.jsx     | 7 ++++++-
 .../src/components/accounts/AccountSyncCheck.jsx           | 7 ++++++-
 .../src/components/modals/ConfirmTransactionDelete.tsx     | 2 +-
 .../src/components/modals/ConfirmTransactionEdit.tsx       | 2 +-
 .../src/components/modals/ConfirmUnlinkAccount.tsx         | 2 +-
 .../src/components/modals/CreateAccountModal.tsx           | 2 +-
 .../src/components/modals/GoCardlessInitialise.tsx         | 2 +-
 .../src/components/reports/SaveReportDelete.tsx            | 4 +---
 .../src/components/schedules/ScheduleLink.tsx              | 2 +-
 9 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/desktop-client/src/components/accounts/Account.jsx b/packages/desktop-client/src/components/accounts/Account.jsx
index d66496c375..ae922ed509 100644
--- a/packages/desktop-client/src/components/accounts/Account.jsx
+++ b/packages/desktop-client/src/components/accounts/Account.jsx
@@ -73,7 +73,12 @@ function EmptyMessage({ onAdd }) {
           manage it locally yourself.
         </Text>
 
-        <Button type="primary" autoFocus style={{ marginTop: 20 }} onClick={onAdd}>
+        <Button
+          type="primary"
+          autoFocus
+          style={{ marginTop: 20 }}
+          onClick={onAdd}
+        >
           Add account
         </Button>
 
diff --git a/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx b/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx
index 587618bb6b..d68c9d7746 100644
--- a/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx
+++ b/packages/desktop-client/src/components/accounts/AccountSyncCheck.jsx
@@ -130,7 +130,12 @@ export function AccountSyncCheck() {
           {showAuth ? (
             <>
               <Button onClick={unlink}>Unlink</Button>
-              <Button type="primary" autoFocus onClick={reauth} style={{ marginLeft: 5 }}>
+              <Button
+                type="primary"
+                autoFocus
+                onClick={reauth}
+                style={{ marginLeft: 5 }}
+              >
                 Reauthorize
               </Button>
             </>
diff --git a/packages/desktop-client/src/components/modals/ConfirmTransactionDelete.tsx b/packages/desktop-client/src/components/modals/ConfirmTransactionDelete.tsx
index c125df9b2b..6ae802cf40 100644
--- a/packages/desktop-client/src/components/modals/ConfirmTransactionDelete.tsx
+++ b/packages/desktop-client/src/components/modals/ConfirmTransactionDelete.tsx
@@ -3,11 +3,11 @@ import React from 'react';
 import { useResponsive } from '../../ResponsiveProvider';
 import { styles } from '../../style';
 import { Button } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Modal } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
-import { InitialFocus } from '../common/InitialFocus';
 
 type ConfirmTransactionDeleteProps = {
   modalProps: CommonModalProps;
diff --git a/packages/desktop-client/src/components/modals/ConfirmTransactionEdit.tsx b/packages/desktop-client/src/components/modals/ConfirmTransactionEdit.tsx
index eb0ca6abc6..94e4bf48ce 100644
--- a/packages/desktop-client/src/components/modals/ConfirmTransactionEdit.tsx
+++ b/packages/desktop-client/src/components/modals/ConfirmTransactionEdit.tsx
@@ -3,10 +3,10 @@ import React from 'react';
 
 import { Block } from '../common/Block';
 import { Button } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Modal } from '../common/Modal';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
-import { InitialFocus } from '../common/InitialFocus';
 
 type ConfirmTransactionEditProps = {
   modalProps: Partial<CommonModalProps>;
diff --git a/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx b/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx
index b496de1de6..a654b9edd1 100644
--- a/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx
+++ b/packages/desktop-client/src/components/modals/ConfirmUnlinkAccount.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
 import { Button } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Modal } from '../common/Modal';
 import { Paragraph } from '../common/Paragraph';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
-import { InitialFocus } from '../common/InitialFocus';
 
 type ConfirmUnlinkAccountProps = {
   modalProps: CommonModalProps;
diff --git a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
index ddc40a50cc..c6d046dac6 100644
--- a/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
+++ b/packages/desktop-client/src/components/modals/CreateAccountModal.tsx
@@ -12,6 +12,7 @@ import { type SyncServerStatus } from '../../hooks/useSyncServerStatus';
 import { SvgDotsHorizontalTriple } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button, ButtonWithLoading } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Link } from '../common/Link';
 import { Menu } from '../common/Menu';
 import { Modal } from '../common/Modal';
@@ -20,7 +21,6 @@ import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
 import { Tooltip } from '../tooltips';
-import { InitialFocus } from '../common/InitialFocus';
 
 type CreateAccountProps = {
   modalProps: CommonModalProps;
diff --git a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx b/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
index 0c5ce8e121..b296333e88 100644
--- a/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
+++ b/packages/desktop-client/src/components/modals/GoCardlessInitialise.tsx
@@ -5,6 +5,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
 
 import { Error } from '../alerts';
 import { ButtonWithLoading } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Input } from '../common/Input';
 import { Link } from '../common/Link';
 import { Modal, ModalButtons } from '../common/Modal';
@@ -12,7 +13,6 @@ import type { ModalProps } from '../common/Modal';
 import { Text } from '../common/Text';
 import { View } from '../common/View';
 import { FormField, FormLabel } from '../forms';
-import { InitialFocus } from '../common/InitialFocus';
 
 type GoCardlessInitialiseProps = {
   modalProps?: Partial<ModalProps>;
diff --git a/packages/desktop-client/src/components/reports/SaveReportDelete.tsx b/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
index 6b896c630c..a9fda1e8ab 100644
--- a/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
+++ b/packages/desktop-client/src/components/reports/SaveReportDelete.tsx
@@ -36,9 +36,7 @@ export function SaveReportDelete({
         <Button type="primary" autoFocus onClick={onDelete}>
           Yes
         </Button>
-        <Button onClick={onClose}>
-          No
-        </Button>
+        <Button onClick={onClose}>No</Button>
       </Stack>
     </>
   );
diff --git a/packages/desktop-client/src/components/schedules/ScheduleLink.tsx b/packages/desktop-client/src/components/schedules/ScheduleLink.tsx
index ea6de5bdfe..c1b09992b3 100644
--- a/packages/desktop-client/src/components/schedules/ScheduleLink.tsx
+++ b/packages/desktop-client/src/components/schedules/ScheduleLink.tsx
@@ -11,6 +11,7 @@ import { type TransactionEntity } from 'loot-core/src/types/models';
 import { type BoundActions } from '../../hooks/useActions';
 import { SvgAdd } from '../../icons/v0';
 import { Button } from '../common/Button';
+import { InitialFocus } from '../common/InitialFocus';
 import { Modal } from '../common/Modal';
 import { Search } from '../common/Search';
 import { Text } from '../common/Text';
@@ -18,7 +19,6 @@ import { View } from '../common/View';
 import { type CommonModalProps } from '../Modals';
 
 import { ROW_HEIGHT, SchedulesTable } from './SchedulesTable';
-import { InitialFocus } from '../common/InitialFocus';
 
 export function ScheduleLink({
   modalProps,

From e12f8927a2a06d0ea25354ba3f24b69bdd875d00 Mon Sep 17 00:00:00 2001
From: Robert Dyer <rdyer@unl.edu>
Date: Wed, 10 Jul 2024 15:03:42 -0500
Subject: [PATCH 6/6] fix linter

---
 .../desktop-client/src/components/accounts/Account.jsx     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/desktop-client/src/components/accounts/Account.jsx b/packages/desktop-client/src/components/accounts/Account.jsx
index c9c61b79bd..6aa9cc9157 100644
--- a/packages/desktop-client/src/components/accounts/Account.jsx
+++ b/packages/desktop-client/src/components/accounts/Account.jsx
@@ -76,7 +76,12 @@ function EmptyMessage({ onAdd }) {
           manage it locally yourself.
         </Text>
 
-        <Button variant="primary" style={{ marginTop: 20 }} autoFocus onPress={onAdd}>
+        <Button
+          variant="primary"
+          style={{ marginTop: 20 }}
+          autoFocus
+          onPress={onAdd}
+        >
           Add account
         </Button>