Merge pull request #37861 from jeremy-croff/36381

fix(36381): blur composer on edit menu action
Expensify · Mar 11, 2024 · 91dafcb · 91dafcb
2 parents 3d4504e + b1b642c
commit 91dafcb
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git 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<View>) {
+function BaseMiniContextMenuItem(
+    {tooltipText, onPress, children, isDelayButtonStateComplete = true, shouldPreventDefaultFocusOnPress = true}: BaseMiniContextMenuItemProps,
+    ref: ForwardedRef<View>,
+) {
     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
@@ -44,6 +44,8 @@ type ContextMenuItemProps = {
 
     /** Styles to apply to ManuItem wrapper */
     wrapperStyle?: StyleProp<ViewStyle>;
+
+    shouldPreventDefaultFocusOnPress?: boolean;
 };
 
 type ContextMenuItemHandle = {
@@ -63,6 +65,7 @@ function ContextMenuItem(
         isFocused = false,
         shouldLimitWidth = true,
         wrapperStyle,
+        shouldPreventDefaultFocusOnPress = true,
     }: ContextMenuItemProps,
     ref: ForwardedRef<ContextMenuItemHandle>,
 ) {
@@ -94,6 +97,7 @@ function ContextMenuItem(
             tooltipText={itemText}
             onPress={triggerPressAndUpdateSuccess}
             isDelayButtonStateComplete={!isThrottledButtonActive}
+            shouldPreventDefaultFocusOnPress={shouldPreventDefaultFocusOnPress}
         >
             {({hovered, pressed}) => (
                 <Icon

diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx
@@ -265,6 +265,7 @@ function BaseReportActionContextMenu({
                             description={contextAction.getDescription?.(selection) ?? ''}
                             isAnonymousAction={contextAction.isAnonymousAction}
                             isFocused={focusedIndex === index}
+                            shouldPreventDefaultFocusOnPress={contextAction.shouldPreventDefaultFocusOnPress}
                         />
                     );
                 })}

diff --git 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,
     },
 ];