Merge pull request #31457 from situchan/revert-30864-fix/29379

fix "Chat - Keyboard is displayed on header menu screen after sending a file larger than 24 MB"

src/components/EmojiPicker/EmojiPickerButton.js

@@ -5,8 +5,6 @@ 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 * as StyleUtils from '@styles/StyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
@@ -44,9 +42,6 @@ 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 {
@@ -70,4 +65,4 @@ function EmojiPickerButton(props) {
 EmojiPickerButton.propTypes = propTypes;
 EmojiPickerButton.defaultProps = defaultProps;
 EmojiPickerButton.displayName = 'EmojiPickerButton';
-export default compose(withLocalize, withNavigationFocus)(EmojiPickerButton);
+export default withLocalize(EmojiPickerButton);

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useMemo} from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -9,12 +9,9 @@ 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 useThemeStyles from '@styles/useThemeStyles';
@@ -87,9 +84,6 @@ const propTypes = {
         // eslint-disable-next-line react/forbid-prop-types
         current: PropTypes.object,
     }).isRequired,
-
-    /** Whether navigation is focused */
-    isFocused: PropTypes.bool.isRequired,
 };
 
 const defaultProps = {
@@ -122,7 +116,6 @@ function AttachmentPickerWithMenuItems({
     onAddActionPressed,
     onItemSelected,
     actionButtonRef,
-    isFocused,
 }) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -172,33 +165,10 @@ function AttachmentPickerWithMenuItems({
         ];
     }, [betas, report, reportID, translate]);
 
-    const onPopoverMenuClose = useCallback(() => {
+    const onPopoverMenuClose = () => {
         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 (
         <AttachmentPicker>
@@ -270,10 +240,6 @@ function AttachmentPickerWithMenuItems({
                                     ref={actionButtonRef}
                                     onPress={(e) => {
                                         e.preventDefault();
-                                        if (!isFocused) {
-                                            return;
-                                        }
-
                                         onAddActionPressed();
 
                                         // Drop focus to avoid blue focus ring.
@@ -291,7 +257,7 @@ function AttachmentPickerWithMenuItems({
                         </View>
                         <PopoverMenu
                             animationInTiming={CONST.ANIMATION_IN_TIMING}
-                            isVisible={isMenuVisible && isFocused}
+                            isVisible={isMenuVisible}
                             onClose={onPopoverMenuClose}
                             onItemSelected={(item, index) => {
                                 setMenuVisibility(false);
@@ -321,11 +287,8 @@ AttachmentPickerWithMenuItems.propTypes = propTypes;
 AttachmentPickerWithMenuItems.defaultProps = defaultProps;
 AttachmentPickerWithMenuItems.displayName = 'AttachmentPickerWithMenuItems';
 
-export default compose(
-    withNavigationFocus,
-    withOnyx({
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
-    }),
-)(AttachmentPickerWithMenuItems);
+export default withOnyx({
+    betas: {
+        key: ONYXKEYS.BETAS,
+    },
+})(AttachmentPickerWithMenuItems);