diff --git a/packages/desktop-client/src/components/common/Menu.tsx b/packages/desktop-client/src/components/common/Menu.tsx index 709c7295bdd13c010182af4f8fe238dc03ae1c7e..8320f955675987127bfe377b25cbccea954ead80 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 ed3dbcfc97459c360306a5cfd99c85dde7c1ca19..27992d63d9048034ce0794ddc8e48f1fb70df99c 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 09bd6073c5e12d03ce7abf135a7e5617416d4293..2df640e50da5a931e0d0fd9961f78c9e3aead0be 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 0000000000000000000000000000000000000000..6348df01ae6899dd7856eb0089f2ce599c4c1ade --- /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