From 1cef0d11ee29cf23d38ba4a213bd45ea41d77dd9 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Thu, 25 Jul 2024 13:50:23 -0700
Subject: [PATCH] Fix menus autoclosed when clicked element on top of the menu
item (#3131)
* Fix menus autoclosed when clicked element on top of the menu item
* Release notes
---
.../src/components/common/Menu.tsx | 4 ++--
.../components/mobile/accounts/Accounts.jsx | 23 +++++++++----------
.../mobile/transactions/Transaction.jsx | 6 +++--
upcoming-release-notes/3131.md | 6 +++++
4 files changed, 23 insertions(+), 16 deletions(-)
create mode 100644 upcoming-release-notes/3131.md
diff --git a/packages/desktop-client/src/components/common/Menu.tsx b/packages/desktop-client/src/components/common/Menu.tsx
index 709c7295b..8320f9556 100644
--- a/packages/desktop-client/src/components/common/Menu.tsx
+++ b/packages/desktop-client/src/components/common/Menu.tsx
@@ -129,7 +129,7 @@ export function Menu<T extends MenuItem>({
} else if (item.type === Menu.label) {
return (
<Text
- key={item.name}
+ key={idx}
style={{
color: theme.menuItemTextHeader,
fontSize: 11,
@@ -167,7 +167,7 @@ export function Menu<T extends MenuItem>({
}}
onPointerEnter={() => setHoveredIndex(idx)}
onPointerLeave={() => setHoveredIndex(null)}
- onClick={e => {
+ onPointerUp={e => {
e.stopPropagation();
if (!item.disabled && item.toggle === undefined) {
diff --git a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
index ed3dbcfc9..27992d63d 100644
--- a/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
+++ b/packages/desktop-client/src/components/mobile/accounts/Accounts.jsx
@@ -12,7 +12,7 @@ import { useSetThemeColor } from '../../../hooks/useSetThemeColor';
import { SvgAdd } from '../../../icons/v1';
import { theme, styles } from '../../../style';
import { makeAmountFullStyle } from '../../budget/util';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
import { Text } from '../../common/Text';
import { TextOneLine } from '../../common/TextOneLine';
import { View } from '../../common/View';
@@ -78,17 +78,17 @@ function AccountCard({
data-testid="account"
>
<Button
- onMouseDown={() => onSelect(account.id)}
- style={{
+ onPress={() => onSelect(account.id)}
+ style={({ isPressed }) => ({
flexDirection: 'row',
border: '1px solid ' + theme.pillBorder,
flex: 1,
alignItems: 'center',
borderRadius: 6,
- '&:active': {
+ ...(isPressed && {
opacity: 0.1,
- },
- }}
+ }),
+ })}
>
<View
style={{
@@ -182,14 +182,13 @@ function AccountList({
title="Accounts"
rightContent={
<Button
- type="bare"
- style={{
+ variant="bare"
+ style={({ isHovered, isPressed }) => ({
color: theme.mobileHeaderText,
margin: 10,
- }}
- activeStyle={noBackgroundColorStyle}
- hoveredStyle={noBackgroundColorStyle}
- onClick={onAddAccount}
+ ...(isHovered || isPressed ? noBackgroundColorStyle : {}),
+ })}
+ onPress={onAddAccount}
>
<SvgAdd width={20} height={20} />
</Button>
diff --git a/packages/desktop-client/src/components/mobile/transactions/Transaction.jsx b/packages/desktop-client/src/components/mobile/transactions/Transaction.jsx
index 09bd6073c..2df640e50 100644
--- a/packages/desktop-client/src/components/mobile/transactions/Transaction.jsx
+++ b/packages/desktop-client/src/components/mobile/transactions/Transaction.jsx
@@ -15,7 +15,7 @@ import {
} from '../../../icons/v2';
import { styles, theme } from '../../../style';
import { makeAmountFullStyle } from '../../budget/util';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
import { Text } from '../../common/Text';
import { TextOneLine } from '../../common/TextOneLine';
import { View } from '../../common/View';
@@ -100,7 +100,9 @@ export const Transaction = memo(function Transaction({
return (
<Button
- onClick={() => onSelect(transaction)}
+ onPress={() => {
+ onSelect(transaction);
+ }}
style={{
backgroundColor: theme.tableBackground,
border: 'none',
diff --git a/upcoming-release-notes/3131.md b/upcoming-release-notes/3131.md
new file mode 100644
index 000000000..6348df01a
--- /dev/null
+++ b/upcoming-release-notes/3131.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix menus autoclosed when clicked element on top of the menu
--
GitLab