fix: close popover when dragging over

src/components/DragAndDrop/NoDropZone/index.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
-import React, {useRef} from 'react';
+import React, {useContext, useRef} from 'react';
 import {View} from 'react-native';
+import {PopoverContext} from '@components/PopoverProvider';
 import useDragAndDrop from '@hooks/useDragAndDrop';
 import styles from '@styles/styles';
 
@@ -11,10 +12,13 @@ const propTypes = {
 
 function NoDropZone({children}) {
     const noDropZone = useRef(null);
+    const {close: closePopover} = useContext(PopoverContext);
     useDragAndDrop({
         dropZone: noDropZone,
         shouldAllowDrop: false,
+        onDragEnter: closePopover,
     });
+
     return (
         <View
             ref={(e) => (noDropZone.current = e)}

src/components/PopoverProvider/index.tsx

@@ -93,6 +93,16 @@ function PopoverContextProvider(props: PopoverContextProps) {
         };
     }, [closePopover]);
 
+    React.useEffect(() => {
+        const listener = () => {
+            closePopover();
+        };
+        document.addEventListener('dragenter', listener);
+        return () => {
+            document.removeEventListener('dragenter', listener);
+        };
+    }, [closePopover]);
+
     const onOpen = React.useCallback(
         (popoverParams: AnchorRef) => {
             if (activePopoverRef.current && activePopoverRef.current.ref !== popoverParams?.ref) {

src/hooks/useDragAndDrop.ts

@@ -11,6 +11,7 @@ const DROP_EVENT = 'drop';
 type DragAndDropParams = {
     dropZone: React.MutableRefObject<HTMLDivElement | null>;
     onDrop?: (event?: DragEvent) => void;
+    onDragEnter?: (event?: DragEvent) => void;
     shouldAllowDrop?: boolean;
     isDisabled?: boolean;
     shouldAcceptDrop?: (event?: DragEvent) => boolean;
@@ -23,7 +24,14 @@ type DragAndDropOptions = {
 /**
  * @param dropZone – ref to the dropZone component
  */
-export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllowDrop = true, isDisabled = false, shouldAcceptDrop = () => true}: DragAndDropParams): DragAndDropOptions {
+export default function useDragAndDrop({
+    dropZone,
+    onDrop = () => {},
+    onDragEnter = () => {},
+    shouldAllowDrop = true,
+    isDisabled = false,
+    shouldAcceptDrop = () => true,
+}: DragAndDropParams): DragAndDropOptions {
     const isFocused = useIsFocused();
     const [isDraggingOver, setIsDraggingOver] = useState(false);
 
@@ -75,6 +83,7 @@ export default function useDragAndDrop({dropZone, onDrop = () => {}, shouldAllow
                 case DRAG_ENTER_EVENT:
                     dragCounter.current++;
                     setDropEffect(event);
+                    onDragEnter(event);
                     if (isDraggingOver) {
                         return;
                     }

src/pages/home/ReportScreen.js

@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -10,6 +10,7 @@ import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import MoneyReportHeader from '@components/MoneyReportHeader';
 import MoneyRequestHeader from '@components/MoneyRequestHeader';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import {PopoverContext} from '@components/PopoverProvider';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
@@ -158,10 +159,15 @@ function ReportScreen({
     const [isBannerVisible, setIsBannerVisible] = useState(true);
     const [listHeight, setListHeight] = useState(0);
 
+    const [isDraggingOver, setIsDraggingOver] = useState(false);
+    const prevIsDraggingOver = usePrevious(isDraggingOver);
+
     const reportID = getReportID(route);
     const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
     const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];
 
+    const {close: closePopover, isOpen} = useContext(PopoverContext);
+
     // There are no reportActions at all to display and we are still in the process of loading the next set of actions.
     const isLoadingInitialReportActions = _.isEmpty(reportActions) && reportMetadata.isLoadingInitialReportActions;
 
@@ -273,6 +279,15 @@ function ReportScreen({
         [route],
     );
 
+    useEffect(() => {
+        if (prevIsDraggingOver === isDraggingOver) {
+            return;
+        }
+        if (isDraggingOver && closePopover && isOpen) {
+            closePopover();
+        }
+    }, [isDraggingOver, closePopover, prevIsDraggingOver, isOpen]);
+
     useEffect(() => {
         fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
@@ -409,7 +424,10 @@ function ReportScreen({
                                 shouldShowCloseButton
                             />
                         )}
-                        <DragAndDropProvider isDisabled={!isReportReadyForDisplay || !ReportUtils.canUserPerformWriteAction(report)}>
+                        <DragAndDropProvider
+                            isDisabled={!isReportReadyForDisplay || !ReportUtils.canUserPerformWriteAction(report)}
+                            setIsDraggingOver={setIsDraggingOver}
+                        >
                             <View
                                 style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]}
                                 onLayout={onListLayout}

src/pages/home/report/ReportActionCompose/SuggestionEmoji.js

@@ -62,7 +62,7 @@ function SuggestionEmoji({
 }) {
     const [suggestionValues, setSuggestionValues] = useState(defaultSuggestionsValues);
 
-    const isEmojiSuggestionsMenuVisible = !_.isEmpty(suggestionValues.suggestedEmojis) && suggestionValues.shouldShowEmojiSuggestionMenu;
+    const isEmojiSuggestionsMenuVisible = !_.isEmpty(suggestionValues.suggestedEmojis) && suggestionValues.shouldShowSuggestionMenu;
 
     const [highlightedEmojiIndex, setHighlightedEmojiIndex] = useArrowKeyFocusManager({
         isActive: isEmojiSuggestionsMenuVisible,
@@ -165,13 +165,13 @@ function SuggestionEmoji({
             const nextState = {
                 suggestedEmojis: [],
                 colonIndex,
-                shouldShowEmojiSuggestionMenu: false,
+                shouldShowSuggestionMenu: false,
             };
             const newSuggestedEmojis = EmojiUtils.suggestEmojis(leftString, preferredLocale);
 
             if (newSuggestedEmojis.length && isCurrentlyShowingEmojiSuggestion) {
                 nextState.suggestedEmojis = newSuggestedEmojis;
-                nextState.shouldShowEmojiSuggestionMenu = !_.isEmpty(newSuggestedEmojis);
+                nextState.shouldShowSuggestionMenu = !_.isEmpty(newSuggestedEmojis);
             }
 
             setSuggestionValues((prevState) => ({...prevState, ...nextState}));

src/pages/home/report/ReportActionCompose/Suggestions.js

@@ -1,6 +1,10 @@
 import PropTypes from 'prop-types';
-import React, {useCallback, useImperativeHandle, useRef} from 'react';
+import React, {useCallback, useContext, useEffect, useImperativeHandle, useRef} from 'react';
 import {View} from 'react-native';
+import {DragAndDropContext} from '@components/DragAndDrop/Provider';
+import usePrevious from '@hooks/usePrevious';
+import getPlatform from '@libs/getPlatform';
+import CONST from '@src/CONST';
 import SuggestionEmoji from './SuggestionEmoji';
 import SuggestionMention from './SuggestionMention';
 import * as SuggestionProps from './suggestionProps';
@@ -45,6 +49,8 @@ function Suggestions({
 }) {
     const suggestionEmojiRef = useRef(null);
     const suggestionMentionRef = useRef(null);
+    const {isDraggingOver} = useContext(DragAndDropContext);
+    const prevIsDraggingOver = usePrevious(isDraggingOver);
 
     const getSuggestions = useCallback(() => {
         if (suggestionEmojiRef.current && suggestionEmojiRef.current.getSuggestions) {
@@ -111,6 +117,29 @@ function Suggestions({
         [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions],
     );
 
+    useEffect(() => {
+        if (prevIsDraggingOver === isDraggingOver) {
+            return;
+        }
+        if (isDraggingOver) {
+            updateShouldShowSuggestionMenuToFalse();
+        }
+    }, [isDraggingOver, prevIsDraggingOver, updateShouldShowSuggestionMenuToFalse]);
+
+    useEffect(() => {
+        if (![CONST.PLATFORM.WEB, CONST.PLATFORM.DESKTOP].includes(getPlatform())) {
+            return;
+        }
+        // hide popover on drag enter
+        const listener = () => {
+            updateShouldShowSuggestionMenuToFalse();
+        };
+        document.addEventListener('dragenter', listener);
+        return () => {
+            document.removeEventListener('dragenter', listener);
+        };
+    }, [updateShouldShowSuggestionMenuToFalse]);
+
     const baseProps = {
         value,
         setValue,

src/pages/settings/AboutPage/AboutPage.js

@@ -64,6 +64,7 @@ function AboutPage(props) {
                 action: () => {
                     Link.openExternalLink(CONST.GITHUB_URL);
                 },
+                link: CONST.GITHUB_URL,
             },
             {
                 translationKey: 'initialSettingsPage.aboutPage.viewOpenJobs',