Skip to content

fix: extra saved search action menu briefly appears at the top left #56594

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

Merged
techievivek merged 7 commits into from
Feb 14, 2025
Merged

fix: extra saved search action menu briefly appears at the top left #56594

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
3a50dd2
fix: extra saved search action menu briefly appears at the top left c…
nkdengineer Feb 10, 2025
3f7a315
fix lint
nkdengineer Feb 10, 2025
405ea9f
Merge branch 'main' into fix/56505 # Please enter a commit message to…
nkdengineer Feb 13, 2025
cad3b97
Fix all three dots menu
nkdengineer Feb 13, 2025
27487b5
Merge branch 'main' into fix/56505
nkdengineer Feb 14, 2025
5313131
fix lint
nkdengineer Feb 14, 2025
7fb7cc9
fix lint
nkdengineer Feb 14, 2025
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
21 changes: 18 additions & 3 deletions src/ROUTES.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1743,7 +1743,12 @@ const ROUTES = {
},
POLICY_ACCOUNTING_XERO_ORGANIZATION: {
route: 'settings/workspaces/:policyID/accounting/xero/organization/:currentOrganizationID',
getRoute: (policyID: string, currentOrganizationID: string) => `settings/workspaces/${policyID}/accounting/xero/organization/${currentOrganizationID}` as const,
getRoute: (policyID: string | undefined, currentOrganizationID: string | undefined) => {
if (!policyID || !currentOrganizationID) {
Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_XERO_ORGANIZATION route');
}
return `settings/workspaces/${policyID}/accounting/xero/organization/${currentOrganizationID}` as const;
},
},
POLICY_ACCOUNTING_XERO_TRACKING_CATEGORIES: {
route: 'settings/workspaces/:policyID/accounting/xero/import/tracking-categories',
Expand Down Expand Up @@ -1837,7 +1842,12 @@ const ROUTES = {
MISSING_PERSONAL_DETAILS: 'missing-personal-details',
POLICY_ACCOUNTING_NETSUITE_SUBSIDIARY_SELECTOR: {
route: 'settings/workspaces/:policyID/accounting/netsuite/subsidiary-selector',
getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/netsuite/subsidiary-selector` as const,
getRoute: (policyID: string | undefined) => {
if (!policyID) {
Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_NETSUITE_SUBSIDIARY_SELECTOR route');
}
return `settings/workspaces/${policyID}/accounting/netsuite/subsidiary-selector` as const;
},
},
POLICY_ACCOUNTING_NETSUITE_EXISTING_CONNECTIONS: {
route: 'settings/workspaces/:policyID/accounting/netsuite/existing-connections',
Expand Down Expand Up @@ -2043,7 +2053,12 @@ const ROUTES = {
},
POLICY_ACCOUNTING_SAGE_INTACCT_ENTITY: {
route: 'settings/workspaces/:policyID/accounting/sage-intacct/entity',
getRoute: (policyID: string) => `settings/workspaces/${policyID}/accounting/sage-intacct/entity` as const,
getRoute: (policyID: string | undefined) => {
if (!policyID) {
Log.warn('Invalid policyID is used to build the POLICY_ACCOUNTING_SAGE_INTACCT_ENTITY route');
}
return `settings/workspaces/${policyID}/accounting/sage-intacct/entity` as const;
},
},
POLICY_ACCOUNTING_SAGE_INTACCT_IMPORT: {
route: 'settings/workspaces/:policyID/accounting/sage-intacct/import',
Expand Down
5 changes: 4 additions & 1 deletion src/components/ThreeDotsMenu/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type {StyleProp, ViewStyle} from 'react-native';
import type {LayoutRectangle, NativeSyntheticEvent, StyleProp, ViewStyle} from 'react-native';
import type {PopoverMenuItem} from '@components/PopoverMenu';
import type {TranslationPaths} from '@src/languages/types';
import type {AnchorPosition} from '@src/styles';
Expand Down Expand Up @@ -49,4 +49,7 @@ type ThreeDotsMenuProps = {
shouldShowProductTrainingTooltip?: boolean;
};

type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle; target: HTMLElement}>;

export type {LayoutChangeEventWithTarget};
export default ThreeDotsMenuProps;
21 changes: 13 additions & 8 deletions src/pages/Search/SavedSearchItemThreeDotMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, {useRef, useState} from 'react';
import type {LayoutChangeEvent, LayoutRectangle, NativeSyntheticEvent} from 'react-native';
import {View} from 'react-native';
import type {PopoverMenuItem} from '@components/PopoverMenu';
import ThreeDotsMenu from '@components/ThreeDotsMenu';
Expand All @@ -12,6 +13,9 @@ type SavedSearchItemThreeDotMenuProps = {
renderTooltipContent: () => React.JSX.Element;
shouldRenderTooltip: boolean;
};

type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle; target: HTMLElement}>;

function SavedSearchItemThreeDotMenu({menuItems, isDisabledItem, hideProductTrainingTooltip, renderTooltipContent, shouldRenderTooltip}: SavedSearchItemThreeDotMenuProps) {
const threeDotsMenuContainerRef = useRef<View>(null);
const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState({horizontal: 0, vertical: 0});
Expand All @@ -20,17 +24,18 @@ function SavedSearchItemThreeDotMenu({menuItems, isDisabledItem, hideProductTrai
<View
ref={threeDotsMenuContainerRef}
style={[isDisabledItem && styles.pointerEventsNone]}
onLayout={(e: LayoutChangeEvent) => {
const target = e.target || (e as LayoutChangeEventWithTarget).nativeEvent.target;
target?.measureInWindow((x, y, width) => {
setThreeDotsMenuPosition({
horizontal: x + width,
vertical: y,
});
});
}}
>
<ThreeDotsMenu
menuItems={menuItems}
onIconPress={() => {
threeDotsMenuContainerRef.current?.measureInWindow((x, y, width) => {
setThreeDotsMenuPosition({
horizontal: x + width,
vertical: y,
});
});
}}
anchorPosition={threeDotsMenuPosition}
renderProductTrainingTooltipContent={renderTooltipContent}
shouldShowProductTrainingTooltip={shouldRenderTooltip}
Expand Down
33 changes: 18 additions & 15 deletions src/pages/settings/Subscription/CardSection/CardSectionActions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React, {useCallback, useMemo, useRef, useState} from 'react';
import React, {useMemo, useRef, useState} from 'react';
import type {LayoutChangeEvent} from 'react-native';
import {View} from 'react-native';
import * as Expensicons from '@components/Icon/Expensicons';
import ThreeDotsMenu from '@components/ThreeDotsMenu';
import type ThreeDotsMenuProps from '@components/ThreeDotsMenu/types';
import type {LayoutChangeEventWithTarget} from '@components/ThreeDotsMenu/types';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import Navigation from '@navigation/Navigation';
Expand Down Expand Up @@ -37,22 +39,23 @@ function CardSectionActions() {
[translate],
);

const calculateAndSetThreeDotsMenuPosition = useCallback(() => {
if (shouldUseNarrowLayout) {
return;
}
threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
setThreeDotsMenuPosition({
horizontal: x + width,
vertical: y + height,
});
});
}, [shouldUseNarrowLayout]);

return (
<View ref={threeDotsMenuContainerRef}>
<View
ref={threeDotsMenuContainerRef}
onLayout={(e: LayoutChangeEvent) => {
Copy link
Member

@parasharrajat parasharrajat Apr 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As onLayout event does not trigger when element position changes relative to its parent. It caused #57011

if (shouldUseNarrowLayout) {
return;
}
const target = e.target || (e as LayoutChangeEventWithTarget).nativeEvent.target;
target?.measureInWindow((x, y, width) => {
setThreeDotsMenuPosition({
horizontal: x + width,
vertical: y,
});
});
}}
>
<ThreeDotsMenu
onIconPress={calculateAndSetThreeDotsMenuPosition}
menuItems={overflowMenu}
anchorPosition={threeDotsMenuPosition}
anchorAlignment={anchorAlignment}
Expand Down
37 changes: 19 additions & 18 deletions src/pages/settings/Subscription/TaxExemptActions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React, {useCallback, useMemo, useRef, useState} from 'react';
import React, {useMemo, useRef, useState} from 'react';
import {View} from 'react-native';
import type {LayoutChangeEvent} from 'react-native';
import * as Expensicons from '@components/Icon/Expensicons';
import ThreeDotsMenu from '@components/ThreeDotsMenu';
import type ThreeDotsMenuProps from '@components/ThreeDotsMenu/types';
import type {LayoutChangeEventWithTarget} from '@components/ThreeDotsMenu/types';
import useLocalize from '@hooks/useLocalize';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useThemeStyles from '@hooks/useThemeStyles';
import type {AnchorPosition} from '@styles/index';
import * as Report from '@userActions/Report';
import * as Subscription from '@userActions/Subscription';
import {navigateToConciergeChat} from '@userActions/Report';
import {requestTaxExempt} from '@userActions/Subscription';
import CONST from '@src/CONST';

const anchorAlignment = {
Expand All @@ -30,33 +32,32 @@ function TaxExemptActions() {
numberOfLinesTitle: 2,
text: translate('subscription.details.taxExempt'),
onSelected: () => {
Subscription.requestTaxExempt();
Report.navigateToConciergeChat();
requestTaxExempt();
navigateToConciergeChat();
},
},
],
[translate],
);

const calculateAndSetThreeDotsMenuPosition = useCallback(() => {
if (shouldUseNarrowLayout) {
return;
}
threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
setThreeDotsMenuPosition({
horizontal: x + width,
vertical: y + height,
});
});
}, [shouldUseNarrowLayout]);

return (
<View
ref={threeDotsMenuContainerRef}
style={[styles.mtn2, styles.pAbsolute, styles.rn3]}
onLayout={(e: LayoutChangeEvent) => {
if (shouldUseNarrowLayout) {
return;
}
const target = e.target || (e as LayoutChangeEventWithTarget).nativeEvent.target;
target?.measureInWindow((x, y, width) => {
setThreeDotsMenuPosition({
horizontal: x + width,
vertical: y,
});
});
}}
>
<ThreeDotsMenu
onIconPress={calculateAndSetThreeDotsMenuPosition}
menuItems={overflowMenu}
anchorPosition={threeDotsMenuPosition}
anchorAlignment={anchorAlignment}
Expand Down
30 changes: 17 additions & 13 deletions src/pages/workspace/WorkspacesListRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, {useRef, useState} from 'react';
import {View} from 'react-native';
import type {StyleProp, ViewStyle} from 'react-native';
import type {LayoutChangeEvent, StyleProp, ViewStyle} from 'react-native';
import type {ValueOf} from 'type-fest';
import Avatar from '@components/Avatar';
import Badge from '@components/Badge';
Expand All @@ -10,6 +10,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
import type {PopoverMenuItem} from '@components/PopoverMenu';
import Text from '@components/Text';
import ThreeDotsMenu from '@components/ThreeDotsMenu';
import type {LayoutChangeEventWithTarget} from '@components/ThreeDotsMenu/types';
import Tooltip from '@components/Tooltip';
import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
Expand Down Expand Up @@ -165,19 +166,22 @@ function WorkspacesListRow({
<View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, isNarrow && styles.workspaceListRBR]}>
<BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
</View>
<View ref={threeDotsMenuContainerRef}>
<ThreeDotsMenu
onIconPress={() => {
if (shouldUseNarrowLayout) {
return;
}
threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
setThreeDotsMenuPosition({
horizontal: x + width,
vertical: y + height,
});
<View
ref={threeDotsMenuContainerRef}
onLayout={(e: LayoutChangeEvent) => {
if (shouldUseNarrowLayout) {
return;
}
const target = e.target || (e as LayoutChangeEventWithTarget).nativeEvent.target;
target?.measureInWindow((x, y, width) => {
setThreeDotsMenuPosition({
horizontal: x + width,
vertical: y,
});
}}
});
}}
>
<ThreeDotsMenu
menuItems={menuItems}
anchorPosition={threeDotsMenuPosition}
anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
Expand Down
Loading