Skip to content

Commit

Permalink
Merge pull request #32133 from ishpaul777/fix/29379
Browse files Browse the repository at this point in the history
fixes keyboard popup regression
  • Loading branch information
NikkiWines authored Dec 18, 2023
2 parents 73f42a8 + 0b76ffd commit 19ca744
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 4 deletions.
7 changes: 6 additions & 1 deletion src/components/EmojiPicker/EmojiPickerButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ 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 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';

Expand Down Expand Up @@ -43,6 +45,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 {
Expand All @@ -66,4 +71,4 @@ function EmojiPickerButton(props) {
EmojiPickerButton.propTypes = propTypes;
EmojiPickerButton.defaultProps = defaultProps;
EmojiPickerButton.displayName = 'EmojiPickerButton';
export default withLocalize(EmojiPickerButton);
export default compose(withLocalize, withNavigationFocus)(EmojiPickerButton);
Original file line number Diff line number Diff line change
@@ -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 _ from 'underscore';
import AttachmentPicker from '@components/AttachmentPicker';
Expand All @@ -8,7 +8,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 useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import * as Browser from '@libs/Browser';
Expand Down Expand Up @@ -80,6 +82,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 = {
Expand Down Expand Up @@ -110,6 +115,7 @@ function AttachmentPickerWithMenuItems({
onAddActionPressed,
onItemSelected,
actionButtonRef,
isFocused,
}) {
const styles = useThemeStyles();
const {translate} = useLocalize();
Expand Down Expand Up @@ -166,6 +172,24 @@ function AttachmentPickerWithMenuItems({
onMenuClosed();
};

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;
}
setMenuVisibility(false);
}, [didScreenBecomeInactive, isMenuVisible, setMenuVisibility]);

return (
<AttachmentPicker>
{({openPicker}) => {
Expand Down Expand Up @@ -236,6 +260,9 @@ function AttachmentPickerWithMenuItems({
ref={actionButtonRef}
onPress={(e) => {
e.preventDefault();
if (!isFocused) {
return;
}
onAddActionPressed();

// Drop focus to avoid blue focus ring.
Expand All @@ -253,7 +280,7 @@ function AttachmentPickerWithMenuItems({
</View>
<PopoverMenu
animationInTiming={CONST.ANIMATION_IN_TIMING}
isVisible={isMenuVisible}
isVisible={isMenuVisible && isFocused}
onClose={onPopoverMenuClose}
onItemSelected={(item, index) => {
setMenuVisibility(false);
Expand Down Expand Up @@ -283,4 +310,4 @@ AttachmentPickerWithMenuItems.propTypes = propTypes;
AttachmentPickerWithMenuItems.defaultProps = defaultProps;
AttachmentPickerWithMenuItems.displayName = 'AttachmentPickerWithMenuItems';

export default AttachmentPickerWithMenuItems;
export default withNavigationFocus(AttachmentPickerWithMenuItems);

0 comments on commit 19ca744

Please sign in to comment.