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

@CortneyOfstad

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:

Go to staging.new.expensify.com
Go to Search.
Click Filters.
Add a few filters.
Click Save search.
Repeat Step 3 to 5 a few times to create more saved searches until the list is scrollable.
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:

Screenshots/Videos

Bug6603097_1726280758510!Screenshot_2024-09-14_at_10 22 48

Bug6603097_1726280758540.20240914_102238.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @CortneyOfstad

@CortneyOfstad

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.

👋 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:

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

@carlosmiceli

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

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)

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)

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

@dominictb

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

@CortneyOfstad

@CortneyOfstad Sure, done!

@dominictb

Payment Summary

@dominictb — paid $250 via Upwork

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

11 remaining items

Payment Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Sep 14, 2024

github-actions commented on Sep 14, 2024

melvin-bot commented on Sep 14, 2024

ChavdaSachin commented on Sep 14, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

dominictb commented on Sep 14, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

11 remaining items

CortneyOfstad commented on Sep 23, 2024

CortneyOfstad commented on Sep 27, 2024

dominictb commented on Sep 30, 2024

CortneyOfstad commented on Oct 1, 2024

Payment Summary

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions