fix: to budget button

next steps didn't work
actualbudget · Oct 30, 2024 · d80c069 · d80c069
1 parent f6d94ea
commit d80c069
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 52 deletions.
diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx
@@ -1,4 +1,9 @@
-import React, { useRef, useState, type CSSProperties } from 'react';
+import React, {
+  useRef,
+  useState,
+  type CSSProperties,
+  useCallback,
+} from 'react';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
@@ -11,6 +16,7 @@ import { TransferMenu } from '../TransferMenu';
 
 import { ToBudgetAmount } from './ToBudgetAmount';
 import { ToBudgetMenu } from './ToBudgetMenu';
+import { useFeatureFlag } from '../../../../hooks/useFeatureFlag';
 
 type ToBudgetProps = {
   month: string;
@@ -28,8 +34,17 @@ export function ToBudget({
   amountStyle,
   isCollapsed = false,
 }: ToBudgetProps) {
-  const [menuOpen, setMenuOpen] = useState<string | null>(null);
+  const [menuOpen, _setMenuOpen] = useState<string | null>(null);
   const triggerRef = useRef(null);
+
+  const ref = useRef<HTMLSpanElement>(null);
+  const setMenuOpen = useCallback(
+    (menu: string | null) => {
+      if (menu) ref.current?.focus();
+      _setMenuOpen(menu);
+    },
+    [triggerRef],
+  );
   const sheetValue = useEnvelopeSheetValue({
     name: envelopeBudget.toBudget,
     value: 0,
@@ -41,6 +56,7 @@ export function ToBudget({
     );
   }
   const isMenuOpen = Boolean(menuOpen);
+  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   return (
     <>
@@ -51,6 +67,11 @@ export function ToBudget({
           style={style}
           amountStyle={amountStyle}
           isTotalsListTooltipDisabled={!isCollapsed || isMenuOpen}
+          onContextMenu={e => {
+            if (!contextMenusEnabled) return;
+            e.preventDefault();
+            setMenuOpen('actions');
+          }}
         />
       </View>
 
@@ -62,48 +83,50 @@ export function ToBudget({
         style={{ width: 200 }}
         isNonModal
       >
-        {menuOpen === 'actions' && (
-          <ToBudgetMenu
-            onTransfer={() => setMenuOpen('transfer')}
-            onCover={() => setMenuOpen('cover')}
-            onHoldBuffer={() => setMenuOpen('buffer')}
-            onResetHoldBuffer={() => {
-              onBudgetAction(month, 'reset-hold');
-              setMenuOpen(null);
-            }}
-          />
-        )}
-        {menuOpen === 'buffer' && (
-          <HoldMenu
-            onClose={() => setMenuOpen(null)}
-            onSubmit={amount => {
-              onBudgetAction(month, 'hold', { amount });
-            }}
-          />
-        )}
-        {menuOpen === 'transfer' && (
-          <TransferMenu
-            initialAmount={availableValue ?? undefined}
-            onClose={() => setMenuOpen(null)}
-            onSubmit={(amount, categoryId) => {
-              onBudgetAction(month, 'transfer-available', {
-                amount,
-                category: categoryId,
-              });
-            }}
-          />
-        )}
-        {menuOpen === 'cover' && (
-          <CoverMenu
-            showToBeBudgeted={false}
-            onClose={() => setMenuOpen(null)}
-            onSubmit={categoryId => {
-              onBudgetAction(month, 'cover-overbudgeted', {
-                category: categoryId,
-              });
-            }}
-          />
-        )}
+        <span tabIndex={-1} ref={ref}>
+          {menuOpen === 'actions' && (
+            <ToBudgetMenu
+              onTransfer={() => setMenuOpen('transfer')}
+              onCover={() => setMenuOpen('cover')}
+              onHoldBuffer={() => setMenuOpen('buffer')}
+              onResetHoldBuffer={() => {
+                onBudgetAction(month, 'reset-hold');
+                setMenuOpen(null);
+              }}
+            />
+          )}
+          {menuOpen === 'buffer' && (
+            <HoldMenu
+              onClose={() => setMenuOpen(null)}
+              onSubmit={amount => {
+                onBudgetAction(month, 'hold', { amount });
+              }}
+            />
+          )}
+          {menuOpen === 'transfer' && (
+            <TransferMenu
+              initialAmount={availableValue ?? undefined}
+              onClose={() => setMenuOpen(null)}
+              onSubmit={(amount, categoryId) => {
+                onBudgetAction(month, 'transfer-available', {
+                  amount,
+                  category: categoryId,
+                });
+              }}
+            />
+          )}
+          {menuOpen === 'cover' && (
+            <CoverMenu
+              showToBeBudgeted={false}
+              onClose={() => setMenuOpen(null)}
+              onSubmit={categoryId => {
+                onBudgetAction(month, 'cover-overbudgeted', {
+                  category: categoryId,
+                });
+              }}
+            />
+          )}
+        </span>
       </Popover>
     </>
   );

diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx
@@ -1,10 +1,9 @@
-import React, { type CSSProperties } from 'react';
+import React, { type CSSProperties, type MouseEventHandler } from 'react';
 
 import { css } from '@emotion/css';
 
 import { envelopeBudget } from 'loot-core/src/client/queries';
 
-import { useFeatureFlag } from '../../../../hooks/useFeatureFlag';
 import { theme, styles } from '../../../../style';
 import { Block } from '../../../common/Block';
 import { Tooltip } from '../../../common/Tooltip';
@@ -23,6 +22,7 @@ type ToBudgetAmountProps = {
   style?: CSSProperties;
   amountStyle?: CSSProperties;
   onClick: () => void;
+  onContextMenu?: MouseEventHandler;
   isTotalsListTooltipDisabled?: boolean;
 };
 
@@ -32,6 +32,7 @@ export function ToBudgetAmount({
   amountStyle,
   onClick,
   isTotalsListTooltipDisabled = false,
+  onContextMenu,
 }: ToBudgetAmountProps) {
   const sheetName = useEnvelopeSheetName(envelopeBudget.toBudget);
   const sheetValue = useEnvelopeSheetValue({
@@ -47,7 +48,6 @@ export function ToBudgetAmount({
   }
   const num = availableValue ?? 0;
   const isNegative = num < 0;
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   return (
     <View style={{ alignItems: 'center', ...style }}>
@@ -73,11 +73,7 @@ export function ToBudgetAmount({
           >
             <Block
               onClick={onClick}
-              onContextMenu={e => {
-                if (!contextMenusEnabled) return;
-                e.preventDefault();
-                onClick();
-              }}
+              onContextMenu={onContextMenu}
               data-cellname={sheetName}
               className={css([
                 styles.veryLargeText,