From b1c1c49897fa291910a8dece9725190f21457132 Mon Sep 17 00:00:00 2001 From: dan Date: Sat, 23 Nov 2024 19:13:17 +0000 Subject: Fix avi button hitslops (#6662) * Remove web hack from non-web file * Remove hitSlop on the wrong Pressable It is not doing anything useful. * Extend avi column to prevent hit rect clipping You can't click outside the parent on Android. * Bump pressed opacity to .8 * Slightly reduce avi button hitslops * Asymmetric hit slop --- src/view/com/util/forms/NativeDropdown.tsx | 24 +++++------------------- 1 file changed, 5 insertions(+), 19 deletions(-) (limited to 'src/view/com/util/forms/NativeDropdown.tsx') diff --git a/src/view/com/util/forms/NativeDropdown.tsx b/src/view/com/util/forms/NativeDropdown.tsx index 22237f5e1..8fc9be6da 100644 --- a/src/view/com/util/forms/NativeDropdown.tsx +++ b/src/view/com/util/forms/NativeDropdown.tsx @@ -5,10 +5,9 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import * as DropdownMenu from 'zeego/dropdown-menu' import {MenuItemCommonProps} from 'zeego/lib/typescript/menu' -import {HITSLOP_10} from '#/lib/constants' import {usePalette} from '#/lib/hooks/usePalette' import {useTheme} from '#/lib/ThemeContext' -import {isIOS, isWeb} from '#/platform/detection' +import {isIOS} from '#/platform/detection' import {Portal} from '#/components/Portal' // Custom Dropdown Menu Components @@ -30,31 +29,18 @@ export const DropdownMenuTrigger = DropdownMenu.create( (props: TriggerProps) => { const theme = useTheme() const defaultCtrlColor = theme.palette.default.postCtrl - const ref = React.useRef(null) - - // HACK - // fire a click event on the keyboard press to trigger the dropdown - // -prf - const onPress = isWeb - ? (evt: any) => { - if (evt instanceof KeyboardEvent) { - // @ts-ignore web only -prf - ref.current?.click() - } - } - : undefined return ( + // This Pressable doesn't actually do anything other than + // provide the "pressed state" visual feedback. [{opacity: pressed ? 0.5 : 1}]} - hitSlop={HITSLOP_10} - onPress={onPress}> + style={({pressed}) => [{opacity: pressed ? 0.8 : 1}]}> - + {props.children ? ( props.children ) : ( -- cgit 1.4.1