update(review): applied withoutOverlay to edge cases

Author: ikevin127

src/components/EmojiPicker/EmojiPicker.tsx

@@ -36,6 +36,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
         vertical: 0,
     });
     const [emojiPopoverAnchorOrigin, setEmojiPopoverAnchorOrigin] = useState<AnchorOrigin>(DEFAULT_ANCHOR_ORIGIN);
+    const [isWithoutOverlay, setIsWithoutOverlay] = useState(true);
     const [activeID, setActiveID] = useState<string | null>();
     const emojiPopoverAnchorRef = useRef<EmojiPopoverAnchor | null>(null);
     const emojiAnchorDimension = useRef({
@@ -78,10 +79,12 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
         onWillShow?: OnWillShowPicker,
         id?: string,
         activeEmojiValue?: string,
+        withoutOverlay = true,
     ) => {
         onModalHide.current = onModalHideValue;
         onEmojiSelected.current = onEmojiSelectedValue;
         activeEmoji.current = activeEmojiValue;
+        setIsWithoutOverlay(withoutOverlay);
         emojiPopoverAnchorRef.current = emojiPopoverAnchorValue;
         const emojiPopoverAnchor = getEmojiPopoverAnchor();
         // Drop focus to avoid blue focus ring.
@@ -203,7 +206,7 @@ function EmojiPicker({viewportOffsetTop}: EmojiPickerProps, ref: ForwardedRef<Em
                 horizontal: emojiPopoverAnchorPosition.horizontal,
             }}
             anchorRef={getEmojiPopoverAnchor() as RefObject<View | HTMLDivElement>}
-            withoutOverlay
+            withoutOverlay={isWithoutOverlay}
             popoverDimensions={{
                 width: CONST.EMOJI_PICKER_SIZE.WIDTH,
                 height: CONST.EMOJI_PICKER_SIZE.HEIGHT,

src/components/EmojiPicker/EmojiPickerButtonDropdown.tsx

@@ -25,11 +25,12 @@ type EmojiPickerButtonDropdownProps = {
     value?: string;
     disabled?: boolean;
     style: StyleProp<ViewStyle>;
+    withoutOverlay?: boolean;
 };
 
 function EmojiPickerButtonDropdown(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    {isDisabled = false, onModalHide, onInputChange, value, disabled, style, ...otherProps}: EmojiPickerButtonDropdownProps,
+    {isDisabled = false, withoutOverlay = false, onModalHide, onInputChange, value, disabled, style, ...otherProps}: EmojiPickerButtonDropdownProps,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ref: ForwardedRef<AnimatedTextInputRef>,
 ) {
@@ -57,6 +58,7 @@ function EmojiPickerButtonDropdown(
             () => {},
             undefined,
             value,
+            withoutOverlay,
         );
     };
 

src/components/LHNOptionsList/OptionRowLHN.tsx

@@ -168,6 +168,7 @@ function OptionRowLHN({
             callbacks: {
                 onHide: () => setIsContextMenuActive(false),
             },
+            withoutOverlay: false,
         });
     };
 

src/libs/actions/EmojiPickerAction.ts

@@ -27,6 +27,7 @@ type EmojiPickerRef = {
         onWillShow?: OnWillShowPicker,
         id?: string,
         activeEmoji?: string,
+        withoutOverlay?: boolean,
     ) => void;
     isActive: (id: string) => boolean;
     clearActive: () => void;
@@ -57,12 +58,13 @@ function showEmojiPicker(
     onWillShow: OnWillShowPicker = () => {},
     id?: string,
     activeEmoji?: string,
+    withoutOverlay?: boolean,
 ) {
     if (!emojiPickerRef.current) {
         return;
     }
 
-    emojiPickerRef.current.showEmojiPicker(onModalHide, onEmojiSelected, emojiPopoverAnchor, anchorOrigin, onWillShow, id, activeEmoji);
+    emojiPickerRef.current.showEmojiPicker(onModalHide, onEmojiSelected, emojiPopoverAnchor, anchorOrigin, onWillShow, id, activeEmoji, withoutOverlay);
 }
 
 /**

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.tsx

@@ -68,6 +68,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
     const [isThreadReportParentAction, setIsThreadReportParentAction] = useState(false);
     const [disabledActions, setDisabledActions] = useState<ContextMenuAction[]>([]);
     const [shouldSwitchPositionIfOverflow, setShouldSwitchPositionIfOverflow] = useState(false);
+    const [isWithoutOverlay, setIsWithoutOverlay] = useState<boolean>(true);
 
     const contentRef = useRef<View>(null);
     const anchorRef = useRef<View | HTMLDivElement | null>(null);
@@ -170,11 +171,13 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
             disabledOptions = [],
             shouldCloseOnTarget = false,
             isOverflowMenu = false,
+            withoutOverlay = true,
         } = showContextMenuParams;
         const {reportID, originalReportID, isArchivedRoom = false, isChronos = false, isPinnedChat = false, isUnreadChat = false} = report;
         const {reportActionID, draftMessage, isThreadReportParentAction: isThreadReportParentActionParam = false} = reportAction;
         const {onShow = () => {}, onHide = () => {}, setIsEmojiPickerActive = () => {}} = callbacks;
         setIsContextMenuOpening(true);
+        setIsWithoutOverlay(withoutOverlay);
         const {pageX = 0, pageY = 0} = extractPointerEvent(event);
         contextMenuAnchorRef.current = contextMenuAnchor;
         contextMenuTargetNode.current = event.target as HTMLDivElement;
@@ -343,7 +346,7 @@ function PopoverReportActionContextMenu(_props: unknown, ref: ForwardedRef<Repor
                 disableAnimation={false}
                 shouldSetModalVisibility={false}
                 fullscreen
-                withoutOverlay
+                withoutOverlay={isWithoutOverlay}
                 anchorDimensions={contextMenuDimensions.current}
                 anchorRef={anchorRef}
                 shouldSwitchPositionIfOverflow={shouldSwitchPositionIfOverflow}

src/pages/home/report/ContextMenu/ReportActionContextMenu.ts

@@ -44,6 +44,7 @@ type ShowContextMenuParams = {
     disabledOptions?: ContextMenuAction[];
     shouldCloseOnTarget?: boolean;
     isOverflowMenu?: boolean;
+    withoutOverlay?: boolean;
 };
 
 type ShowContextMenu = (params: ShowContextMenuParams) => void;