diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 3cfd7c4c4138..fb6fd59870a0 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -1,8 +1,9 @@ import _ from 'underscore'; -import React, {useState, useRef} from 'react'; +import React, {useState, useRef, useCallback} from 'react'; import PropTypes from 'prop-types'; import {View, StyleSheet} from 'react-native'; import lodashGet from 'lodash/get'; +import {useFocusEffect} from '@react-navigation/native'; import * as optionRowStyles from '../../styles/optionRowStyles'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -25,6 +26,7 @@ import * as ReportUtils from '../../libs/ReportUtils'; import useLocalize from '../../hooks/useLocalize'; import Permissions from '../../libs/Permissions'; import Tooltip from '../Tooltip'; +import useWindowDimensions from '../../hooks/useWindowDimensions'; const propTypes = { /** Style for hovered state */ @@ -65,12 +67,23 @@ const defaultProps = { function OptionRowLHN(props) { const popoverAnchor = useRef(null); + const isFocusedRef = useRef(true); + const {isSmallScreenWidth} = useWindowDimensions(); const {translate} = useLocalize(); const optionItem = props.optionItem; const [isContextMenuActive, setIsContextMenuActive] = useState(false); + useFocusEffect( + useCallback(() => { + isFocusedRef.current = true; + return () => { + isFocusedRef.current = false; + }; + }, []), + ); + if (!optionItem) { return null; } @@ -110,6 +123,9 @@ function OptionRowLHN(props) { * @param {Object} [event] - A press event. */ const showPopover = (event) => { + if (!isFocusedRef.current && isSmallScreenWidth) { + return; + } setIsContextMenuActive(true); ReportActionContextMenu.showContextMenu( ContextMenuActions.CONTEXT_MENU_TYPES.REPORT, diff --git a/tests/utils/LHNTestUtils.js b/tests/utils/LHNTestUtils.js index 7cb69b23a578..92b8662da5a6 100644 --- a/tests/utils/LHNTestUtils.js +++ b/tests/utils/LHNTestUtils.js @@ -15,6 +15,7 @@ jest.mock('@react-navigation/native', () => { const actualNav = jest.requireActual('@react-navigation/native'); return { ...actualNav, + useFocusEffect: jest.fn(), useIsFocused: () => ({ navigate: mockedNavigate, }),