diff --git a/src/components/BaseMiniContextMenuItem.tsx b/src/components/BaseMiniContextMenuItem.tsx index 7bed44cd8f13..6e1a1e0fd229 100644 --- a/src/components/BaseMiniContextMenuItem.tsx +++ b/src/components/BaseMiniContextMenuItem.tsx @@ -32,13 +32,20 @@ type BaseMiniContextMenuItemProps = { * Whether the button should be in the active state */ isDelayButtonStateComplete: boolean; + /** + * Can be used to control the click event, and for example whether or not to lose focus from the composer when pressing the item + */ + shouldPreventDefaultFocusOnPress?: boolean; }; /** * Component that renders a mini context menu item with a * pressable. Also renders a tooltip when hovering the item. */ -function BaseMiniContextMenuItem({tooltipText, onPress, children, isDelayButtonStateComplete = true}: BaseMiniContextMenuItemProps, ref: ForwardedRef) { +function BaseMiniContextMenuItem( + {tooltipText, onPress, children, isDelayButtonStateComplete = true, shouldPreventDefaultFocusOnPress = true}: BaseMiniContextMenuItemProps, + ref: ForwardedRef, +) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); return ( @@ -64,7 +71,9 @@ function BaseMiniContextMenuItem({tooltipText, onPress, children, isDelayButtonS } // Prevent text input blur on left click - event.preventDefault(); + if (shouldPreventDefaultFocusOnPress) { + event.preventDefault(); + } }} accessibilityLabel={tooltipText} role={CONST.ROLE.BUTTON} diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index d6c8fd973983..b80d6a138c9e 100644 --- a/src/components/ContextMenuItem.tsx +++ b/src/components/ContextMenuItem.tsx @@ -44,6 +44,8 @@ type ContextMenuItemProps = { /** Styles to apply to ManuItem wrapper */ wrapperStyle?: StyleProp; + + shouldPreventDefaultFocusOnPress?: boolean; }; type ContextMenuItemHandle = { @@ -63,6 +65,7 @@ function ContextMenuItem( isFocused = false, shouldLimitWidth = true, wrapperStyle, + shouldPreventDefaultFocusOnPress = true, }: ContextMenuItemProps, ref: ForwardedRef, ) { @@ -94,6 +97,7 @@ function ContextMenuItem( tooltipText={itemText} onPress={triggerPressAndUpdateSuccess} isDelayButtonStateComplete={!isThrottledButtonActive} + shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPress} > {({hovered, pressed}) => ( ); })} diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index ffdbcab577b7..ecfc1dc4a1e2 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -101,6 +101,7 @@ type ContextMenuActionWithIcon = { type ContextMenuAction = (ContextMenuActionWithContent | ContextMenuActionWithIcon) & { isAnonymousAction: boolean; shouldShow: ShouldShow; + shouldPreventDefaultFocusOnPress?: boolean; }; // A list of all the context actions in this menu. @@ -501,6 +502,7 @@ const ContextMenuActions: ContextMenuAction[] = [ openContextMenu(); }, getDescription: () => {}, + shouldPreventDefaultFocusOnPress: false, }, ];