Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix LHN - Click and long pressing a user report with lots of messages opens popover inside report #27904

Closed
wants to merge 7 commits into from
Closed

Fix LHN - Click and long pressing a user report with lots of messages opens popover inside report #27904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
95f187e
fix: left hand navigation row opens modal in wrong screen
redpanda-bit Sep 13, 2023
719964d
test: add useFocusEffect to navigation mock
redpanda-bit Sep 20, 2023
cc87d7e
refactor: use hook instead of HOC for useWindowDimensions
redpanda-bit Sep 21, 2023
3ce5f60
fix: use isSmallScreenWidth inside longpress callback instead of useF…
redpanda-bit Sep 22, 2023
3dac180
fix: eslint rule no conditional hooks OptioRowLHN
redpanda-bit Sep 28, 2023
d2783d2
Merge branch 'main' into fix/hold-to-show-popover-wrong-screen
redpanda-bit Sep 28, 2023
654aaa0
Merge branch 'Expensify:main' into fix/hold-to-show-popover-wrong-screen
redpanda-bit Sep 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion src/components/LHNOptionsList/OptionRowLHN.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 */
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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,
Expand Down
1 change: 1 addition & 0 deletions tests/utils/LHNTestUtils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ jest.mock('@react-navigation/native', () => {
const actualNav = jest.requireActual('@react-navigation/native');
return {
...actualNav,
useFocusEffect: jest.fn(),
useIsFocused: () => ({
navigate: mockedNavigate,
}),
Expand Down
Loading