From fc08baf7ae9e5bb1c860b5b3785292119b598634 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Tue, 31 Oct 2023 07:48:32 -0700
Subject: [PATCH] Fix mobile budget click handlers (#1844)

* Fix mobile budget click handlers

* Release notes
---
 .../src/components/budget/MobileBudgetTable.js     | 14 ++++++++------
 .../src/components/spreadsheet/CellValue.tsx       |  2 ++
 upcoming-release-notes/1844.md                     |  6 ++++++
 3 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 upcoming-release-notes/1844.md

diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
index 986476f7a3e..48d3e0094b4 100644
--- a/packages/desktop-client/src/components/budget/MobileBudgetTable.js
+++ b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -158,7 +158,6 @@ function BudgetCell({
             alignItems: 'flex-end',
             height: ROW_HEIGHT,
           }}
-          onPointerDown={onAmountClick}
         >
           <CellValue
             binding={binding}
@@ -170,6 +169,8 @@ function BudgetCell({
             }}
             getStyle={makeAmountGrey}
             data-testid={name}
+            onPointerUp={onAmountClick}
+            onPointerDown={e => e.preventDefault()}
           />
         </View>
       )}
@@ -370,7 +371,6 @@ const ExpenseCategory = memo(function ExpenseCategory({
       </View>
       <View
         role="button"
-        onPointerDown={() => onEdit?.(category.id)}
         style={{ ...(showEditables && { display: 'none' }), flex: 1 }}
       >
         <Text
@@ -379,6 +379,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
             ...styles.underlinedText,
             ...styles.lineClamp(2),
           }}
+          onPointerUp={() => onEdit?.(category.id)}
           data-testid="category-name"
         >
           {category.name}
@@ -438,7 +439,8 @@ const ExpenseCategory = memo(function ExpenseCategory({
         >
           <span
             role="button"
-            onPointerDown={() => onOpenBudgetActionMenu?.(category.id)}
+            onPointerUp={() => onOpenBudgetActionMenu?.(category.id)}
+            onPointerDown={e => e.preventDefault()}
           >
             <BalanceWithCarryover
               carryover={rolloverBudget.catCarryover(category.id)}
@@ -649,7 +651,6 @@ const ExpenseGroupTotals = memo(function ExpenseGroupTotals({
       </View>
       <View
         role="button"
-        onPointerDown={() => onEdit?.(group.id)}
         style={{ ...(showEditables && { display: 'none' }), flex: 1 }}
       >
         <Text
@@ -660,6 +661,7 @@ const ExpenseGroupTotals = memo(function ExpenseGroupTotals({
             ...styles.lineClamp(2),
             fontWeight: '500',
           }}
+          onPointerUp={() => onEdit?.(group.id)}
           data-testid="name"
         >
           {group.name}
@@ -910,7 +912,6 @@ const IncomeGroupTotals = memo(function IncomeGroupTotals({
           alignItems: 'flex-start',
           height: ROW_HEIGHT,
         }}
-        onPointerDown={() => onEdit?.(group.id)}
       >
         <Text
           style={{
@@ -919,6 +920,7 @@ const IncomeGroupTotals = memo(function IncomeGroupTotals({
             ...styles.lineClamp(2),
             fontWeight: '500',
           }}
+          onPointerUp={() => onEdit?.(group.id)}
           data-testid="name"
         >
           {group.name}
@@ -1106,7 +1108,6 @@ const IncomeCategory = memo(function IncomeCategory({
           alignItems: 'flex-start',
           height: ROW_HEIGHT,
         }}
-        onPointerDown={() => onEdit?.(category.id)}
       >
         <Text
           tabIndex={-1}
@@ -1115,6 +1116,7 @@ const IncomeCategory = memo(function IncomeCategory({
             ...styles.underlinedText,
             ...styles.lineClamp(2),
           }}
+          onPointerUp={() => onEdit?.(category.id)}
           data-testid="name"
         >
           {category.name}
diff --git a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
index 2b7bc06bc36..6c1e725826c 100644
--- a/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
+++ b/packages/desktop-client/src/components/spreadsheet/CellValue.tsx
@@ -31,6 +31,7 @@ function CellValue({
   getStyle,
   privacyFilter,
   'data-testid': testId,
+  ...props
 }: CellValueProps) {
   let { fullSheetName } = useSheetName(binding);
   let sheetValue = useSheetValue(binding);
@@ -54,6 +55,7 @@ function CellValue({
         }}
         data-testid={testId || fullSheetName}
         data-cellname={fullSheetName}
+        {...props}
       >
         {formatter ? formatter(sheetValue) : format(sheetValue, type)}
       </Text>
diff --git a/upcoming-release-notes/1844.md b/upcoming-release-notes/1844.md
new file mode 100644
index 00000000000..7fa37ec9d69
--- /dev/null
+++ b/upcoming-release-notes/1844.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Mobile: Fix mobile budget click handlers