[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)