Merge pull request #37509 from tienifr/fix/34833

Hover menu is not dismissed after opening emoji picker
Expensify · Mar 5, 2024 · 97c654e · 97c654e
2 parents 5787691 + 72c70b0
commit 97c654e
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 9 deletions.
diff --git a/src/components/Reactions/AddReactionBubble.tsx b/src/components/Reactions/AddReactionBubble.tsx
@@ -43,9 +43,12 @@ type AddReactionBubbleProps = {
      * ReportAction for EmojiPicker.
      */
     reportAction: ReportAction;
+
+    /** Function to update emoji picker state */
+    setIsEmojiPickerActive?: (state: boolean) => void;
 };
 
-function AddReactionBubble({onSelectEmoji, reportAction, onPressOpenPicker, onWillShowPicker = () => {}, isContextMenu = false}: AddReactionBubbleProps) {
+function AddReactionBubble({onSelectEmoji, reportAction, onPressOpenPicker, onWillShowPicker = () => {}, isContextMenu = false, setIsEmojiPickerActive}: AddReactionBubbleProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const ref = useRef<View | HTMLDivElement>(null);
@@ -56,7 +59,9 @@ function AddReactionBubble({onSelectEmoji, reportAction, onPressOpenPicker, onWi
     const onPress = () => {
         const openPicker = (refParam?: PickerRefElement, anchorOrigin?: AnchorOrigin) => {
             EmojiPickerAction.showEmojiPicker(
-                () => {},
+                () => {
+                    setIsEmojiPickerActive?.(false);
+                },
                 (emojiCode, emojiObject) => {
                     onSelectEmoji(emojiObject);
                 },
@@ -68,12 +73,14 @@ function AddReactionBubble({onSelectEmoji, reportAction, onPressOpenPicker, onWi
         };
 
         if (!EmojiPickerAction.emojiPickerRef.current?.isEmojiPickerVisible) {
+            setIsEmojiPickerActive?.(true);
             if (onPressOpenPicker) {
                 onPressOpenPicker(openPicker);
             } else {
                 openPicker();
             }
         } else {
+            setIsEmojiPickerActive?.(false);
             EmojiPickerAction.emojiPickerRef.current.hideEmojiPicker();
         }
     };

diff --git a/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.tsx b/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.tsx
@@ -20,6 +20,7 @@ function BaseQuickEmojiReactions({
     emojiReactions = {},
     onPressOpenPicker = () => {},
     onWillShowPicker = () => {},
+    setIsEmojiPickerActive,
 }: BaseQuickEmojiReactionsProps) {
     const styles = useThemeStyles();
 
@@ -45,6 +46,7 @@ function BaseQuickEmojiReactions({
                 onWillShowPicker={onWillShowPicker}
                 onSelectEmoji={(emoji) => onEmojiSelected(emoji, emojiReactions)}
                 reportAction={reportAction}
+                setIsEmojiPickerActive={setIsEmojiPickerActive}
             />
         </View>
     );

diff --git a/src/components/Reactions/QuickEmojiReactions/types.ts b/src/components/Reactions/QuickEmojiReactions/types.ts
@@ -32,6 +32,9 @@ type BaseReactionsProps = {
 
     /** Id of the ReportAction for EmojiPicker. */
     reportActionID: string;
+
+    /** Function to update emoji picker state */
+    setIsEmojiPickerActive?: (state: boolean) => void;
 };
 
 type BaseQuickEmojiReactionsOnyxProps = {
@@ -53,6 +56,8 @@ type QuickEmojiReactionsProps = BaseReactionsProps & {
      * in which this component is rendered.
      */
     closeContextMenu: (callback: CloseContextMenuCallback) => void;
+
+    setIsEmojiPickerActive?: (state: boolean) => void;
 };
 
 export type {BaseQuickEmojiReactionsProps, BaseQuickEmojiReactionsOnyxProps, QuickEmojiReactionsProps, OpenPickerCallback, CloseContextMenuCallback, PickerRefElement};
diff --git a/src/components/Reactions/ReportActionItemEmojiReactions.tsx b/src/components/Reactions/ReportActionItemEmojiReactions.tsx
@@ -37,6 +37,9 @@ type ReportActionItemEmojiReactionsProps = WithCurrentUserPersonalDetailsProps &
 
     /** We disable reacting with emojis on report actions that have errors */
     shouldBlockReactions?: boolean;
+
+    /** Function to update emoji picker state */
+    setIsEmojiPickerActive?: (state: boolean) => void;
 };
 
 type PopoverReactionListAnchors = Record<string, ReactionListAnchor>;
@@ -68,6 +71,8 @@ type FormattedReaction = {
 
     /** The type of action that's pending  */
     pendingAction?: PendingAction;
+
+    setIsEmojiPickerActive?: (state: boolean) => void;
 };
 
 function ReportActionItemEmojiReactions({
@@ -77,6 +82,7 @@ function ReportActionItemEmojiReactions({
     emojiReactions = {},
     shouldBlockReactions = false,
     preferredLocale = CONST.LOCALES.DEFAULT,
+    setIsEmojiPickerActive,
 }: ReportActionItemEmojiReactionsProps) {
     const styles = useThemeStyles();
     const reactionListRef = useContext(ReactionListContext);
@@ -166,6 +172,7 @@ function ReportActionItemEmojiReactions({
                     <AddReactionBubble
                         onSelectEmoji={toggleReaction}
                         reportAction={reportAction}
+                        setIsEmojiPickerActive={setIsEmojiPickerActive}
                     />
                 )}
             </View>

diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx
@@ -86,6 +86,9 @@ type BaseReportActionContextMenuProps = BaseReportActionContextMenuOnyxProps & {
 
     /** List of disabled actions */
     disabledActions?: ContextMenuAction[];
+
+    /** Function to update emoji picker state */
+    setIsEmojiPickerActive?: (state: boolean) => void;
 };
 
 type MenuItemRefs = Record<string, ContextMenuItemHandle | null>;
@@ -108,6 +111,7 @@ function BaseReportActionContextMenu({
     reportActions,
     checkIfContextMenuActive,
     disabledActions = [],
+    setIsEmojiPickerActive,
 }: BaseReportActionContextMenuProps) {
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
@@ -202,7 +206,10 @@ function BaseReportActionContextMenu({
             originalReportID,
             draftMessage,
             checkIfContextMenuActive,
-            checkIfContextMenuActive,
+            () => {
+                checkIfContextMenuActive?.();
+                setShouldKeepOpen(false);
+            },
             ReportUtils.isArchivedRoom(originalReport),
             ReportUtils.chatIncludesChronos(originalReport),
             undefined,
@@ -229,6 +236,7 @@ function BaseReportActionContextMenu({
                         openContextMenu: () => setShouldKeepOpen(true),
                         interceptAnonymousUser,
                         openOverflowMenu,
+                        setIsEmojiPickerActive,
                     };
 
                     if ('renderContent' in contextAction) {

diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.tsx b/src/pages/home/report/ContextMenu/ContextMenuActions.tsx
@@ -71,6 +71,7 @@ type ContextMenuActionPayload = {
     interceptAnonymousUser: (callback: () => void, isAnonymousAction?: boolean) => void;
     openOverflowMenu: (event: GestureResponderEvent | MouseEvent) => void;
     event?: GestureResponderEvent | MouseEvent | KeyboardEvent;
+    setIsEmojiPickerActive?: (state: boolean) => void;
 };
 
 type OnPress = (closePopover: boolean, payload: ContextMenuActionPayload, selection?: string, reportID?: string, draftMessage?: string) => void;
@@ -103,7 +104,7 @@ const ContextMenuActions: ContextMenuAction[] = [
         isAnonymousAction: false,
         shouldShow: (type, reportAction): reportAction is ReportAction =>
             type === CONST.CONTEXT_MENU_TYPES.REPORT_ACTION && !!reportAction && 'message' in reportAction && !ReportActionsUtils.isMessageDeleted(reportAction),
-        renderContent: (closePopover, {reportID, reportAction, close: closeManually, openContextMenu}) => {
+        renderContent: (closePopover, {reportID, reportAction, close: closeManually, openContextMenu, setIsEmojiPickerActive}) => {
             const isMini = !closePopover;
 
             const closeContextMenu = (onHideCallback?: () => void) => {
@@ -120,15 +121,22 @@ const ContextMenuActions: ContextMenuAction[] = [
             const toggleEmojiAndCloseMenu = (emoji: Emoji, existingReactions: OnyxEntry<ReportActionReactions>) => {
                 Report.toggleEmojiReaction(reportID, reportAction, emoji, existingReactions);
                 closeContextMenu();
+                setIsEmojiPickerActive?.(false);
             };
 
             if (isMini) {
                 return (
                     <MiniQuickEmojiReactions
                         key="MiniQuickEmojiReactions"
                         onEmojiSelected={toggleEmojiAndCloseMenu}
-                        onPressOpenPicker={openContextMenu}
-                        onEmojiPickerClosed={closeContextMenu}
+                        onPressOpenPicker={() => {
+                            openContextMenu();
+                            setIsEmojiPickerActive?.(true);
+                        }}
+                        onEmojiPickerClosed={() => {
+                            closeContextMenu();
+                            setIsEmojiPickerActive?.(false);
+                        }}
                         reportActionID={reportAction?.reportActionID}
                         reportAction={reportAction}
                     />
@@ -142,6 +150,7 @@ const ContextMenuActions: ContextMenuAction[] = [
                     onEmojiSelected={toggleEmojiAndCloseMenu}
                     reportActionID={reportAction?.reportActionID}
                     reportAction={reportAction}
+                    setIsEmojiPickerActive={setIsEmojiPickerActive}
                 />
             );
         },
@@ -476,8 +485,9 @@ const ContextMenuActions: ContextMenuAction[] = [
         textTranslateKey: 'reportActionContextMenu.menu',
         icon: Expensicons.ThreeDots,
         shouldShow: (type, reportAction, isArchivedRoom, betas, anchor, isChronosReport, reportID, isPinnedChat, isUnreadChat, isOffline, isMini) => isMini,
-        onPress: (closePopover, {openOverflowMenu, event}) => {
+        onPress: (closePopover, {openOverflowMenu, event, openContextMenu}) => {
             openOverflowMenu(event as GestureResponderEvent | MouseEvent);
+            openContextMenu();
         },
         getDescription: () => {},
     },

diff --git a/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx
@@ -72,6 +72,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
 
     const onPopoverShow = useRef(() => {});
     const onPopoverHide = useRef(() => {});
+    const onEmojiPickerToggle = useRef<undefined | ((state: boolean) => void)>();
     const onCancelDeleteModal = useRef(() => {});
     const onComfirmDeleteModal = useRef(() => {});
 
@@ -164,6 +165,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
         isUnreadChat = false,
         disabledOptions = [],
         shouldCloseOnTarget = false,
+        setIsEmojiPickerActive = () => {},
     ) => {
         const {pageX = 0, pageY = 0} = extractPointerEvent(event);
         contextMenuAnchorRef.current = contextMenuAnchor;
@@ -177,6 +179,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
 
         onPopoverShow.current = onShow;
         onPopoverHide.current = onHide;
+        onEmojiPickerToggle.current = setIsEmojiPickerActive;
 
         new Promise<void>((resolve) => {
             if (!pageX && !pageY && contextMenuAnchorRef.current) {
@@ -329,6 +332,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
                     contentRef={contentRef}
                     originalReportID={originalReportIDRef.current}
                     disabledActions={disabledActions}
+                    setIsEmojiPickerActive={onEmojiPickerToggle.current}
                 />
             </PopoverWithMeasuredContent>
             <ConfirmModal

diff --git a/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts b/src/pages/home/report/ContextMenu/ReportActionContextMenu.ts
@@ -35,6 +35,7 @@ type ShowContextMenu = (
     isUnreadChat?: boolean,
     disabledOptions?: ContextMenuAction[],
     shouldCloseOnTarget?: boolean,
+    setIsEmojiPickerActive?: (state: boolean) => void,
 ) => void;
 
 type ReportActionContextMenu = {
@@ -115,6 +116,7 @@ function showContextMenu(
     isUnreadChat = false,
     disabledActions: ContextMenuAction[] = [],
     shouldCloseOnTarget = false,
+    setIsEmojiPickerActive = () => {},
 ) {
     if (!contextMenuRef.current) {
         return;
@@ -143,6 +145,7 @@ function showContextMenu(
         isUnreadChat,
         disabledActions,
         shouldCloseOnTarget,
+        setIsEmojiPickerActive,
     );
 }
 

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -144,6 +144,8 @@ function ReportActionItem(props) {
     const StyleUtils = useStyleUtils();
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const [isContextMenuActive, setIsContextMenuActive] = useState(() => ReportActionContextMenu.isActiveReportAction(props.action.reportActionID));
+    const [isEmojiPickerActive, setIsEmojiPickerActive] = useState();
+
     const [isHidden, setIsHidden] = useState(false);
     const [moderationDecision, setModerationDecision] = useState(CONST.MODERATION.MODERATOR_DECISION_APPROVED);
     const reactionListRef = useContext(ReactionListContext);
@@ -291,6 +293,11 @@ function ReportActionItem(props) {
                 toggleContextMenuFromActiveReportAction,
                 ReportUtils.isArchivedRoom(originalReport),
                 ReportUtils.chatIncludesChronos(originalReport),
+                false,
+                false,
+                [],
+                false,
+                setIsEmojiPickerActive,
             );
         },
         [props.draftMessage, props.action, props.report.reportID, toggleContextMenuFromActiveReportAction, originalReport, originalReportID],
@@ -569,6 +576,7 @@ function ReportActionItem(props) {
                                     toggleReaction(emoji);
                                 }
                             }}
+                            setIsEmojiPickerActive={setIsEmojiPickerActive}
                         />
                     </View>
                 )}
@@ -597,7 +605,7 @@ function ReportActionItem(props) {
      * @returns {Object} report action item
      */
     const renderReportActionItem = (hovered, isWhisper, hasErrors) => {
-        const content = renderItemContent(hovered || isContextMenuActive, isWhisper, hasErrors);
+        const content = renderItemContent(hovered || isContextMenuActive || isEmojiPickerActive, isWhisper, hasErrors);
 
         if (!_.isUndefined(props.draftMessage)) {
             return <ReportActionItemDraft>{content}</ReportActionItemDraft>;
@@ -785,8 +793,9 @@ function ReportActionItem(props) {
                             draftMessage={props.draftMessage}
                             isChronosReport={ReportUtils.chatIncludesChronos(originalReport)}
                             checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
+                            setIsEmojiPickerActive={setIsEmojiPickerActive}
                         />
-                        <View style={StyleUtils.getReportActionItemStyle(hovered || isWhisper || isContextMenuActive || !_.isUndefined(props.draftMessage))}>
+                        <View style={StyleUtils.getReportActionItemStyle(hovered || isWhisper || isContextMenuActive || isEmojiPickerActive || !_.isUndefined(props.draftMessage))}>
                             <OfflineWithFeedback
                                 onClose={() => ReportActions.clearReportActionErrors(props.report.reportID, props.action)}
                                 pendingAction={