From 9af11cb1c0742eb8b5bb8131ebdfe3b3d695b0e4 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Fri, 24 Nov 2023 01:32:31 +0530 Subject: [PATCH 1/6] fixes keyboard popup regression --- .../EmojiPicker/EmojiPickerButton.js | 7 ++- .../AttachmentPickerWithMenuItems.js | 49 +++++++++++++++---- 2 files changed, 46 insertions(+), 10 deletions(-) diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index db1834296a52..440f5e3beff1 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 * as StyleUtils from '@styles/StyleUtils'; import useThemeStyles from '@styles/useThemeStyles'; @@ -42,6 +44,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 { @@ -65,4 +70,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 44183b23e43f..8f759b43985b 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -1,5 +1,6 @@ +import withNavigationFocus from '@components/withNavigationFocus'; 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'; @@ -10,8 +11,10 @@ import PopoverMenu from '@components/PopoverMenu'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; 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'; @@ -84,6 +87,9 @@ const propTypes = { // eslint-disable-next-line react/forbid-prop-types current: PropTypes.object, }).isRequired, + + /** Whether or not the screen is focused */ + isFocused: PropTypes.bool.isRequired, }; const defaultProps = { @@ -116,6 +122,7 @@ function AttachmentPickerWithMenuItems({ onAddActionPressed, onItemSelected, actionButtonRef, + isFocused, }) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -165,10 +172,28 @@ 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(() => !isFocused && prevIsFocused, [isFocused, prevIsFocused]); + + // When the navigation is focused, we want to close the popover menu. + useEffect(() => { + if (!didScreenBecomeInactive() || !isMenuVisible) { + return; + } + onPopoverMenuClose(); + }, [didScreenBecomeInactive, onPopoverMenuClose, isMenuVisible]); return ( @@ -240,6 +265,9 @@ function AttachmentPickerWithMenuItems({ ref={actionButtonRef} onPress={(e) => { e.preventDefault(); + if (!isFocused) { + return; + } onAddActionPressed(); // Drop focus to avoid blue focus ring. @@ -257,7 +285,7 @@ function AttachmentPickerWithMenuItems({ { setMenuVisibility(false); @@ -287,8 +315,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); From c0dee2da71361ee48bd0bb1b9233bda887d20934 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Tue, 28 Nov 2023 21:22:52 +0530 Subject: [PATCH 2/6] resolve-conflicts --- .../ReportActionCompose/AttachmentPickerWithMenuItems.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js index d8818766bd54..3436111bcffb 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -13,8 +13,6 @@ 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'; import * as IOU from '@userActions/IOU'; @@ -309,4 +307,4 @@ AttachmentPickerWithMenuItems.defaultProps = defaultProps; AttachmentPickerWithMenuItems.displayName = 'AttachmentPickerWithMenuItems'; -export default compose(withNavigationFocus)(AttachmentPickerWithMenuItems); \ No newline at end of file +export default withNavigationFocus(AttachmentPickerWithMenuItems); From 9c8fd3ed6f03d81ebe56f607e000757ad13e5837 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Tue, 28 Nov 2023 21:44:41 +0530 Subject: [PATCH 3/6] fix prettier diffs --- .../ReportActionCompose/AttachmentPickerWithMenuItems.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js index 3436111bcffb..6c74d3878aa6 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -1,4 +1,3 @@ -import withNavigationFocus from '@components/withNavigationFocus'; import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useMemo} from 'react'; import {View} from 'react-native'; @@ -9,6 +8,7 @@ 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'; @@ -306,5 +306,4 @@ AttachmentPickerWithMenuItems.propTypes = propTypes; AttachmentPickerWithMenuItems.defaultProps = defaultProps; AttachmentPickerWithMenuItems.displayName = 'AttachmentPickerWithMenuItems'; - export default withNavigationFocus(AttachmentPickerWithMenuItems); From 337709b9dda3af06a518be577c1d81a9f21bf605 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Tue, 28 Nov 2023 22:11:15 +0530 Subject: [PATCH 4/6] fix keyboard pop on navigation --- .../ReportActionCompose/AttachmentPickerWithMenuItems.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js index 6c74d3878aa6..925dc14b1e81 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -183,8 +183,8 @@ function AttachmentPickerWithMenuItems({ if (!didScreenBecomeInactive() || !isMenuVisible) { return; } - onPopoverMenuClose(); - }, [didScreenBecomeInactive, onPopoverMenuClose, isMenuVisible]); + setMenuVisibility(false); + }, [didScreenBecomeInactive, isMenuVisible, setMenuVisibility]); return ( From 1b7ea4bc102bc5d5c29fddb57a4cf0f0b0c5aa54 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Tue, 28 Nov 2023 22:42:36 +0530 Subject: [PATCH 5/6] revert unnecessary changes --- .../ReportActionCompose/AttachmentPickerWithMenuItems.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js index 925dc14b1e81..93f06cfc58d4 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -163,10 +163,10 @@ function AttachmentPickerWithMenuItems({ ]; }, [report, reportID, translate]); - const onPopoverMenuClose = useCallback(() => { + const onPopoverMenuClose = () => { setMenuVisibility(false); onMenuClosed(); - }, [onMenuClosed, setMenuVisibility]); + }; const prevIsFocused = usePrevious(isFocused); From 0b76ffde3eec1684d5897f1e974b4f491d318dc8 Mon Sep 17 00:00:00 2001 From: Ishpaul Singh Date: Fri, 15 Dec 2023 00:30:26 +0530 Subject: [PATCH 6/6] fix lint --- src/components/EmojiPicker/EmojiPickerButton.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index 9fa47ee14b96..5888bf30b71a 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -6,9 +6,9 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed import Tooltip from '@components/Tooltip/PopoverAnchorTooltip'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withNavigationFocus from '@components/withNavigationFocus'; -import compose from '@libs/compose'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import compose from '@libs/compose'; import getButtonState from '@libs/getButtonState'; import * as EmojiPickerAction from '@userActions/EmojiPickerAction';