diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index ab9daf3f0cb1..ddfa6b89c899 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -5,6 +5,8 @@ import * as Expensicons from '@components/Icon/Expensicons'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import withNavigationFocus from '@components/withNavigationFocus'; +import compose from '@libs/compose'; import getButtonState from '@libs/getButtonState'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; @@ -41,6 +43,9 @@ function EmojiPickerButton(props) { style={({hovered, pressed}) => [styles.chatItemEmojiButton, StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed))]} disabled={props.isDisabled} onPress={() => { + if (!props.isFocused) { + return; + } if (!EmojiPickerAction.emojiPickerRef.current.isEmojiPickerVisible) { EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor.current, undefined, () => {}, props.emojiPickerID); } else { @@ -64,4 +69,4 @@ function EmojiPickerButton(props) { EmojiPickerButton.propTypes = propTypes; EmojiPickerButton.defaultProps = defaultProps; EmojiPickerButton.displayName = 'EmojiPickerButton'; -export default withLocalize(EmojiPickerButton); +export default compose(withLocalize, withNavigationFocus)(EmojiPickerButton); diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js index a8ecff7c8d82..6ab09a5a1bd4 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import React, {useMemo} from 'react'; +import React, {useCallback, useEffect, useMemo} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -9,9 +9,12 @@ import * as Expensicons from '@components/Icon/Expensicons'; import PopoverMenu from '@components/PopoverMenu'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; +import withNavigationFocus from '@components/withNavigationFocus'; import useLocalize from '@hooks/useLocalize'; +import usePrevious from '@hooks/usePrevious'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; +import compose from '@libs/compose'; import Permissions from '@libs/Permissions'; import * as ReportUtils from '@libs/ReportUtils'; import styles from '@styles/styles'; @@ -84,6 +87,9 @@ const propTypes = { // eslint-disable-next-line react/forbid-prop-types current: PropTypes.object, }).isRequired, + + /** Whether navigation is focused */ + isFocused: PropTypes.bool.isRequired, }; const defaultProps = { @@ -116,6 +122,7 @@ function AttachmentPickerWithMenuItems({ onAddActionPressed, onItemSelected, actionButtonRef, + isFocused, }) { const {translate} = useLocalize(); const {windowHeight} = useWindowDimensions(); @@ -164,10 +171,33 @@ function AttachmentPickerWithMenuItems({ ]; }, [betas, report, reportID, translate]); - const onPopoverMenuClose = () => { + const onPopoverMenuClose = useCallback(() => { setMenuVisibility(false); onMenuClosed(); - }; + }, [onMenuClosed, setMenuVisibility]); + + const prevIsFocused = usePrevious(isFocused); + + /** + * Check if current screen is inactive and previous screen is active. + * Used to close already opened popover menu when any other page is opened over current page. + * + * @return {Boolean} + */ + const didScreenBecomeInactive = useCallback( + () => + // When any other page is opened over LHN + !isFocused && prevIsFocused, + [isFocused, prevIsFocused], + ); + + // When the navigation is focused, we want to close the popover menu. + useEffect(() => { + if (!didScreenBecomeInactive()) { + return; + } + onPopoverMenuClose(); + }, [didScreenBecomeInactive, onPopoverMenuClose]); return ( @@ -239,6 +269,10 @@ function AttachmentPickerWithMenuItems({ ref={actionButtonRef} onPress={(e) => { e.preventDefault(); + if (!isFocused) { + return; + } + onAddActionPressed(); // Drop focus to avoid blue focus ring. @@ -256,7 +290,7 @@ function AttachmentPickerWithMenuItems({ { setMenuVisibility(false); @@ -286,8 +320,11 @@ AttachmentPickerWithMenuItems.propTypes = propTypes; AttachmentPickerWithMenuItems.defaultProps = defaultProps; AttachmentPickerWithMenuItems.displayName = 'AttachmentPickerWithMenuItems'; -export default withOnyx({ - betas: { - key: ONYXKEYS.BETAS, - }, -})(AttachmentPickerWithMenuItems); +export default compose( + withNavigationFocus, + withOnyx({ + betas: { + key: ONYXKEYS.BETAS, + }, + }), +)(AttachmentPickerWithMenuItems);