diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx index 73f377f35c7..5f0f8334ff3 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx @@ -51,6 +51,7 @@ import { import { useFeatureFlag } from '../../hooks/useFeatureFlag'; import { useMergedRefs } from '../../hooks/useMergedRefs'; import { usePrevious } from '../../hooks/usePrevious'; +import { useProperFocus } from '../../hooks/useProperFocus'; import { useSelectedDispatch, useSelectedItems } from '../../hooks/useSelected'; import { useSplitsExpanded } from '../../hooks/useSplitsExpanded'; import { SvgLeftArrow2, SvgRightArrow2, SvgSplit } from '../../icons/v0'; @@ -1725,6 +1726,11 @@ function NewTransaction({ ); const emptyChildTransactions = childTransactions.filter(t => t.amount === 0); + const addButtonRef = useRef(null); + useProperFocus(addButtonRef, focusedField === 'add'); + const cancelButtonRef = useRef(null); + useProperFocus(cancelButtonRef, focusedField === 'cancel'); + return ( onClose()} data-testid="cancel-button" + ref={cancelButtonRef} > Cancel @@ -1805,6 +1812,7 @@ function NewTransaction({ style={{ padding: '4px 10px' }} onPress={onAdd} data-testid="add-button" + ref={addButtonRef} > Add @@ -2178,10 +2186,14 @@ export const TransactionTable = forwardRef((props, ref) => { } }, [prevSplitsExpanded.current]); - const newNavigator = useTableNavigator(newTransactions, getFields); + const newNavigator = useTableNavigator( + newTransactions, + getFieldsNewTransaction, + ); + const tableNavigator = useTableNavigator( transactionsWithExpandedSplits, - getFields, + getFieldsTableTransaction, ); const shouldAdd = useRef(false); const latestState = useRef({ newTransactions, newNavigator, tableNavigator }); @@ -2246,8 +2258,26 @@ export const TransactionTable = forwardRef((props, ref) => { savePending.current = false; }, [newTransactions, props.transactions]); - function getFields(item) { - let fields = [ + function getFieldsNewTransaction(item) { + const fields = [ + 'select', + 'date', + 'account', + 'payee', + 'notes', + 'category', + 'debit', + 'credit', + 'cleared', + 'cancel', + 'add', + ]; + + return getFields(item, fields); + } + + function getFieldsTableTransaction(item) { + const fields = [ 'select', 'date', 'account', @@ -2259,6 +2289,10 @@ export const TransactionTable = forwardRef((props, ref) => { 'cleared', ]; + return getFields(item, fields); + } + + function getFields(item, fields) { fields = item.is_child ? ['select', 'payee', 'notes', 'category', 'debit', 'credit'] : fields.filter( diff --git a/upcoming-release-notes/3571.md b/upcoming-release-notes/3571.md new file mode 100644 index 00000000000..244655708a7 --- /dev/null +++ b/upcoming-release-notes/3571.md @@ -0,0 +1,6 @@ +--- +category: Bugfix +authors: [The-Firexx] +--- + +Fixes focus ring getting "stuck" on last column of /accounts/budgeted screen when creating a new transaction. \ No newline at end of file