[HOLD FOR PAYMENT 9/26] [Search v2.3] - 3-dot menu is always at fixed position instead of right above the saved search

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.35-0
Reproducible in staging?: Y
Reproducible in production?: N/A - new feature, doesn't exist in prod
Issue was found when executing this PR: #48566
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Search.
3. Click Filters.
4. Add a few filters.
5. Click Save search.
6. Repeat Step 3 to 5 a few times to create more saved searches until the list is scrollable.
7. Click 3-dot menu next to the last saved search.

Expected Result:

3-dot menu should be right above the selected saved search.

Actual Result:

3-dot menu is always at the fixed position instead of right above the selected saved search.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6603097_1726280758540.20240914_102238.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @carlosmiceli (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[ChavdaSachin]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Saved search - 3-dot menu is always at fixed position

What is the root cause of that problem?

• Anchor position passed here for the threedot menu here is fixed
  

  App/src/pages/Search/SearchTypeMenu.tsx

  Line 115 in 0c618ac

  anchorPosition={{horizontal: 0, vertical: 380}}

What changes do you think we should make in order to solve the problem?

• we should pass dynamic position for the same as we don on other pages
• Element reference could be used like here
  

  App/src/pages/workspace/WorkspacesListRow.tsx

  Lines 167 to 171 in 0c618ac

  	threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
  	setThreeDotsMenuPosition({
  	horizontal: x + width,
  	vertical: y + height,
  	});

What alternative solutions did you explore? (Optional)

[dominictb]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• 3-dot menu is always at the fixed position instead of right above the selected saved search.

What is the root cause of that problem?

• The anchor position is always the fixed value:
  

  App/src/pages/Search/SearchTypeMenu.tsx

  Line 115 in 0c618ac

  anchorPosition={{horizontal: 0, vertical: 380}}

  
  leads to this bug.

What changes do you think we should make in order to solve the problem?

• We need to get the popover menu position based on its three-dot position by the following steps:

• Track the popover menu position: First, we need to determine the position of the popover menu based on the position of the three-dot button in each item. To achieve this, we’ll create a state to store the anchor position and a ref to store references for each three-dot button:

    const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
    const threeDotsMenuContainerRef = useRef({});

• Initialize the ref for each three-dot button: In the code at this line, add the following block to initialize the ref for each three-dot button based on its key:

            if (!threeDotsMenuContainerRef.current?.[key]) {
                threeDotsMenuContainerRef.current = {...threeDotsMenuContainerRef.current, [key]: createRef()};
            }

This ensures that each three-dot button has its own ref stored in threeDotsMenuContainerRef.

• Update the rightComponent to use the ref and measure the position: In the code at this line, update the rightComponent block to assign the correct ref and calculate the position of the popover menu when the three-dot button is pressed::
  

  App/src/pages/Search/SearchTypeMenu.tsx

  Line 112 in 0c618ac

  rightComponent: (

  
  to:

rightComponent: (
                    <View
                        ref={threeDotsMenuContainerRef?.current?.[key]}
                        style={{backgroundColor: 'red'}}
                    >
                        <ThreeDotsMenu
                            onIconPress={() => {
                                threeDotsMenuContainerRef.current[key].current?.measureInWindow((x, y, width, height) => {
                                    setThreeDotsMenuPosition({
                                        horizontal: x + width,
                                        vertical: y + height,
                                    });
                                });
                            }}
                            menuItems={getOverflowMenu(item.name, Number(key), item.query)}
                            anchorPosition={threeDotsMenuPosition}
                            anchorAlignment={{
                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                            }}
                        />
                    </View>
                ),

What alternative solutions did you explore? (Optional)

[luacmartins]

Demoting to NAB. @dominictb can you work on a fix?

[dominictb]

@luacmartins Yes, I can work on it.

[ChavdaSachin]

@luacmartins could I work on this? Since I was the first to propose the same solution but just didn't include the whole code and including code isn't necessary for the proposal I guess.

[ishpaul777]

Just adding alternative approach

Proposal

Please re-state the problem that we are trying to solve in this issue.

3-dot menu is always at the fixed position instead of right above the selected saved search.

What is the root cause of that problem?

The anchor position has the fixed values here

App/src/pages/Search/SearchTypeMenu.tsx

Line 115 in 0c618ac

anchorPosition={{horizontal: 0, vertical: 380}}

What changes do you think we should make in order to solve the problem?

we need to seperate out the logic of popover position to a new component

1. useState for handling position of popover
2. store container ref in a useref
3. onIconPress get the position of anchor using measureInWindow and set the postion of popover

function SearchItemActionPopover({menuItems}: {menuItems: PopoverMenuItem[]}) {
    const threeDotsMenuContainerRef = useRef<View>(null);
    const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState({horizontal: 0, vertical: 0});

    return (
        <View ref={threeDotsMenuContainerRef}>
            <ThreeDotsMenu
                menuItems={menuItems}
                onIconPress={() => {
                    threeDotsMenuContainerRef.current?.measureInWindow((x, y, width) => {
                        setThreeDotsMenuPosition({
                            horizontal: x + width,
                            vertical: y,
                        });
                    });
                }}
                anchorPosition={threeDotsMenuPosition}
                anchorAlignment={{
                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
                }}
            />
        </View>
    );
}

export default SearchItemActionPopover;

use the above as rightComponent in here

App/src/pages/Search/SearchTypeMenu.tsx

Lines 112 to 121 in 0c618ac

	rightComponent: (
	<ThreeDotsMenu
	menuItems={getOverflowMenu(item.name, Number(key), item.query)}
	anchorPosition={{horizontal: 0, vertical: 380}}
	anchorAlignment={{
	horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
	vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
	}}
	/>
	),

Screen.Recording.2024-09-16.at.1.25.55.PM.mov

[CortneyOfstad]

Issue was deployed production 4 days ago, making the payment date 9/26 — adjusting the title!

[CortneyOfstad]

@dominictb — I sent you a payment offer here, please let me know once you accept and I can get that paid ASAP. Thanks!

[dominictb]

@CortneyOfstad Sure, done!

[CortneyOfstad]

Payment Summary

@dominictb — paid $250 via Upwork