From a20914a06bf29f0038f0cb847918560f7ceca091 Mon Sep 17 00:00:00 2001 From: jeremy-croff Date: Wed, 6 Mar 2024 19:32:19 -0600 Subject: [PATCH 1/3] fix(36381): blur composer on edit --- src/components/BaseMiniContextMenuItem.tsx | 10 ++++++++-- src/components/ContextMenuItem.tsx | 4 ++++ .../report/ContextMenu/BaseReportActionContextMenu.tsx | 1 + .../home/report/ContextMenu/ContextMenuActions.tsx | 2 ++ 4 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/BaseMiniContextMenuItem.tsx b/src/components/BaseMiniContextMenuItem.tsx index 7bed44cd8f13..86dac7371643 100644 --- a/src/components/BaseMiniContextMenuItem.tsx +++ b/src/components/BaseMiniContextMenuItem.tsx @@ -32,13 +32,17 @@ 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 + */ + shouldPreventDefault?: 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, shouldPreventDefault = true}: BaseMiniContextMenuItemProps, ref: ForwardedRef) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); return ( @@ -64,7 +68,9 @@ function BaseMiniContextMenuItem({tooltipText, onPress, children, isDelayButtonS } // Prevent text input blur on left click - event.preventDefault(); + if (shouldPreventDefault) { + event.preventDefault(); + } }} accessibilityLabel={tooltipText} role={CONST.ROLE.BUTTON} diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index d6c8fd973983..af4b78f7b195 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; + + shouldPreventDefault?: boolean; }; type ContextMenuItemHandle = { @@ -63,6 +65,7 @@ function ContextMenuItem( isFocused = false, shouldLimitWidth = true, wrapperStyle, + shouldPreventDefault = true, }: ContextMenuItemProps, ref: ForwardedRef, ) { @@ -94,6 +97,7 @@ function ContextMenuItem( tooltipText={itemText} onPress={triggerPressAndUpdateSuccess} isDelayButtonStateComplete={!isThrottledButtonActive} + shouldPreventDefault={shouldPreventDefault} > {({hovered, pressed}) => ( ); })} diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index 2fd0d0a964a8..f5a4ac6e7b29 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -100,6 +100,7 @@ type ContextMenuActionWithIcon = { type ContextMenuAction = (ContextMenuActionWithContent | ContextMenuActionWithIcon) & { isAnonymousAction: boolean; shouldShow: ShouldShow; + shouldPreventDefault?: boolean; }; // A list of all the context actions in this menu. @@ -485,6 +486,7 @@ const ContextMenuActions: ContextMenuAction[] = [ openOverflowMenu(event as GestureResponderEvent | MouseEvent); }, getDescription: () => {}, + shouldPreventDefault: false, }, ]; From f392a071cc5736c06c970cbd032d3fa91c7f5604 Mon Sep 17 00:00:00 2001 From: jeremy-croff Date: Sun, 10 Mar 2024 12:45:11 -0500 Subject: [PATCH 2/3] fix(36381): Update variable name --- src/components/BaseMiniContextMenuItem.tsx | 6 +++--- src/components/ContextMenuItem.tsx | 6 +++--- .../home/report/ContextMenu/BaseReportActionContextMenu.tsx | 2 +- src/pages/home/report/ContextMenu/ContextMenuActions.tsx | 4 ++-- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/BaseMiniContextMenuItem.tsx b/src/components/BaseMiniContextMenuItem.tsx index 86dac7371643..cc501e04be11 100644 --- a/src/components/BaseMiniContextMenuItem.tsx +++ b/src/components/BaseMiniContextMenuItem.tsx @@ -35,14 +35,14 @@ type BaseMiniContextMenuItemProps = { /** * Can be used to control the click event, and for example whether or not to lose focus from the composer when pressing the item */ - shouldPreventDefault?: boolean; + 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, shouldPreventDefault = true}: BaseMiniContextMenuItemProps, ref: ForwardedRef) { +function BaseMiniContextMenuItem({tooltipText, onPress, children, isDelayButtonStateComplete = true, shouldPreventDefaultFocusOnPress = true}: BaseMiniContextMenuItemProps, ref: ForwardedRef) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); return ( @@ -68,7 +68,7 @@ function BaseMiniContextMenuItem({tooltipText, onPress, children, isDelayButtonS } // Prevent text input blur on left click - if (shouldPreventDefault) { + if (shouldPreventDefaultFocusOnPress) { event.preventDefault(); } }} diff --git a/src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.tsx index af4b78f7b195..b80d6a138c9e 100644 --- a/src/components/ContextMenuItem.tsx +++ b/src/components/ContextMenuItem.tsx @@ -45,7 +45,7 @@ type ContextMenuItemProps = { /** Styles to apply to ManuItem wrapper */ wrapperStyle?: StyleProp; - shouldPreventDefault?: boolean; + shouldPreventDefaultFocusOnPress?: boolean; }; type ContextMenuItemHandle = { @@ -65,7 +65,7 @@ function ContextMenuItem( isFocused = false, shouldLimitWidth = true, wrapperStyle, - shouldPreventDefault = true, + shouldPreventDefaultFocusOnPress = true, }: ContextMenuItemProps, ref: ForwardedRef, ) { @@ -97,7 +97,7 @@ function ContextMenuItem( tooltipText={itemText} onPress={triggerPressAndUpdateSuccess} isDelayButtonStateComplete={!isThrottledButtonActive} - shouldPreventDefault={shouldPreventDefault} + shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPress} > {({hovered, pressed}) => ( ); })} diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx index e0a1df9523cf..d5aeb83c72f4 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx @@ -97,7 +97,7 @@ type ContextMenuActionWithIcon = { type ContextMenuAction = (ContextMenuActionWithContent | ContextMenuActionWithIcon) & { isAnonymousAction: boolean; shouldShow: ShouldShow; - shouldPreventDefault?: boolean; + shouldPreventDefaultFocusOnPress?: boolean; }; // A list of all the context actions in this menu. @@ -496,7 +496,7 @@ const ContextMenuActions: ContextMenuAction[] = [ openContextMenu(); }, getDescription: () => {}, - shouldPreventDefault: false, + shouldPreventDefaultFocusOnPress: false, }, ]; From b1b642c8381fb8afc2fd913cc7cae4a430b7bbf4 Mon Sep 17 00:00:00 2001 From: jeremy-croff Date: Mon, 11 Mar 2024 09:45:54 -0500 Subject: [PATCH 3/3] fix(36381): prettier --- src/components/BaseMiniContextMenuItem.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/BaseMiniContextMenuItem.tsx b/src/components/BaseMiniContextMenuItem.tsx index cc501e04be11..6e1a1e0fd229 100644 --- a/src/components/BaseMiniContextMenuItem.tsx +++ b/src/components/BaseMiniContextMenuItem.tsx @@ -42,7 +42,10 @@ type BaseMiniContextMenuItemProps = { * 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, shouldPreventDefaultFocusOnPress = true}: BaseMiniContextMenuItemProps, ref: ForwardedRef) { +function BaseMiniContextMenuItem( + {tooltipText, onPress, children, isDelayButtonStateComplete = true, shouldPreventDefaultFocusOnPress = true}: BaseMiniContextMenuItemProps, + ref: ForwardedRef, +) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); return (