Fix & refactor popover positioning by jmusial · Pull Request #68026 · Expensify/App

jmusial · 2025-08-06T14:02:23Z

Explanation of Change

Problems

some Popovers were showing below Help Panel
some Popovers were showing correct when Help Panel was open but when it got closed they were ending up in wrong spot
some Popovers were partially hidden by Help Panel
when Poover was open and user was opening help panel, Popover dissapeared. When Help Panel was being closed with Popover open. Popover was still appearing.

Solutions

unify anchor calculation logic for popovers. Anchor now calculates based on parent component location instead of static to the screen.
adjust anchor popover to use screen width adjusted by help panel width
always hide popovers on help panel animation

Note

Not all popovers were migrated to new calculation, but the PR was growing too much. In the leftover cases it makes more sense to use 'legacy' calculation method, but would be good to go through them as a follow up and migrate as well.

Fixed Issues

$ #66244

PROPOSAL:
N/A

Tests

At no points during tests popover should overlap with Help panel.

Changes should affect only wide screen envorinments, since on narrow screens popovers are replaced with Bottom Docked Modals.

1. Button With Dropdown Menu

Open app
Go to Reports
Select Report
Press "1 selected". Popover appears
Open Help panel. (Popover disappears on first click outside).
Press "1 selected". Popover appears
Close Help panel. Popover disappears.

2. Dropdown Button

Open app
Go to Reports
Press "From". Popover appears
Open Help panel. (Popover disappears on first click outside).
Press "From". Popover appears
Close Help panel. Popover disappears.
This can be tried on various screen widths. Popover anchors should adjust to help panel and never overlap.

3. Chat avatar

Open app
Go to Reports -> Chats
Open chat with another user
Add custom avatar if not present
Press on avatar. Popover appears
Open Help panel. (Popover disappears on first click outside).
Press on avatar. Popover appears
Close Help panel. Popover disappears.

4. Delegated access & Copilot

Open app
Go to Account -> Security
Add a copilot
Enter first magic code
On second magic code press 3 dots menu. Popover appears
Open Help panel. (Popover disappears on first click outside).
Press 3 dots menu. Popover appears
Close Help panel. Popover disappears.
Enter second magic code
Press 3 dots next to Copilot name. Popover appears.
Open Help panel. (Popover disappears on first click outside).
Press 3 dots next to Copilot name. Popover appears.
Close Help panel. Popover disappears.

5. Workspaces list

Open app
Go to Worspaces (with at least one workspace)
Press 3 dots menu. Popover appears
Open Help panel. (Popover disappears on first click outside).
Press 3 dots menu. Popover appears
Close Help panel. Popover disappears.

Offline tests

Same as tests

QA Steps

Same as tests

PR Author Checklist

Screenshots/Videos

Android: Native

Popovers are not used on narrow screens.

Android: mWeb Chrome

Popovers are not used on narrow screens.

iOS: Native

Popovers are not used on narrow screens.

iOS: mWeb Safari

Popovers are not used on narrow screens.

MacOS: Chrome / Safari

0038.desktop.chrome.mov

MacOS: Desktop

0038.desktop.native.mov

…panel transition

refactor Popovers to (mostly, use same logic for popover anchor)

blazejkustra

Solid refactor, looks much cleaner!

src/hooks/useSidePanelDisplayStatus.tsx

blazejkustra · 2025-08-12T08:46:43Z

src/CONST/index.ts

        vertical: 72,
    },
-    POPOVER_DROPDOWN_WIDTH: 336,
+    POPOVER_DROPDOWN_WIDTH: 334,


Why was this change necessary?

334 is how it render width after size calculation. Without this change there is 2 px width flicker on the first render.

src/pages/settings/Subscription/TaxExemptActions/index.tsx

src/hooks/usePopoverPosition.ts

src/components/AvatarWithImagePicker.tsx

blazejkustra · 2025-08-12T08:49:42Z

@jmusial FYI Tests are failing 👀

…ination of actions with side panel

mhawryluk

Awesome work!! 🍿

src/components/Popover/index.tsx

src/components/Search/FilterDropdowns/DropdownButton.tsx

src/pages/settings/Subscription/TaxExemptActions/index.tsx

src/pages/settings/Subscription/CardSection/CardSectionActions/index.tsx

blazejkustra

Looks good to me, let's test it extensively (both popovers and help panel).

Also, can we wait with making this PR 'ready for review' for now? I would prefer to have this merged first 🙏

hoangzinh · 2025-08-27T22:36:27Z

src/components/ButtonWithDropdownMenu/index.tsx

                            setIsMenuVisible(false);
                        }
                    }}
-                    anchorPosition={shouldUseStyleUtilityForAnchorPosition ? styles.popoverButtonDropdownMenuOffset(windowWidth) : popoverAnchorPosition}


Should we also clean up popoverButtonDropdownMenuOffset?

blazejkustra · 2025-08-28T08:24:17Z

Back to you @hoangzinh

hoangzinh · 2025-08-28T22:53:58Z

I found a bug:

Bug 1: Unable to add expense or export expense

Screen.Recording.2025-08-29.at.05.52.31.mov

blazejkustra · 2025-08-29T07:49:18Z

The video is going through many screens and popovers, do I understand correctly that the only issue in this video is unclickable 'Add expense' at the start? @hoangzinh

hoangzinh · 2025-08-29T07:56:55Z

@blazejkustra Ah yes, it's "unclickable 'Add expense' at the start". I sent a not-so-good recording 🤦

blazejkustra · 2025-08-29T15:43:10Z

Great catch, there was an infinite loop as anchor default value was initialized with every render. Should work now @hoangzinh!

trjExpensify

No concerns with what this is doing in the product. For the foreseeable future while we focus on #migrate, however, I don’t think we should be prioritising help panel issues as it's behind a ~~beta~~ NVP flag - and don't plan to release it anytime soon. CC: @JmillsExpensify

hoangzinh · 2025-08-31T09:03:55Z

In the leftover cases it makes more sense to use 'legacy' calculation method, but would be good to go through them as a follow up and migrate as well.

According to the PR's description, @blazejkustra, can you list some of them? I found that we already removed useThreeDotsAnchorPosition, just curious what is left.

blazejkustra · 2025-09-01T11:58:48Z

@hoangzinh I think PR description is outdated and I can't edit it 😢

hoangzinh · 2025-09-01T14:12:43Z

@hoangzinh I think PR description is outdated and I can't edit it 😢

No worry @blazejkustra. Can you share an updated version (just summary) of it here?

blazejkustra · 2025-09-01T20:00:14Z

@hoangzinh I mean this part is outdated:

Note

Not all popovers were migrated to new calculation, but the PR was growing too much. In the leftover cases it makes more sense to use 'legacy' calculation method, but would be good to go through them as a follow up and migrate as well.

Meaning I don't think there is anything to list 😄 But we can wait for @jmusial to confirm this.

hoangzinh · 2025-09-01T22:27:12Z

Thanks @blazejkustra

hoangzinh

LGTM

melvin-bot · 2025-09-01T22:27:27Z

We did not find an internal engineer to review this PR, trying to assign a random engineer to #66244 as well as to this PR... Please reach out for help on Slack if no one gets assigned!

OSBotify · 2025-09-02T12:19:10Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

OSBotify · 2025-09-02T22:45:13Z

🚀 Deployed to staging by https://github.com/pecanoro in version: 9.2.1-0 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

OSBotify · 2025-09-05T19:32:12Z

🚀 Deployed to production by https://github.com/arosiclair in version: 9.2.1-20 🚀

platform	result
🖥 desktop 🖥	success ✅
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

blazejkustra · 2025-12-01T18:56:34Z

src/components/PopoverWithMeasuredContent.tsx

    const prevAnchorPosition = usePrevious(anchorPosition);
-    const prevWindowDimensions = usePrevious({windowWidth, windowHeight});
+    const {shouldHideSidePanel} = useSidePanel();
+    const availableWidth = windowWidth - (shouldHideSidePanel ? 0 : variables.sideBarWidth);


jmusial added 12 commits August 6, 2025 16:00

unify 3 dot button anchor algorithm, dissapear 3 dot popover on help …

03a3ff2

…panel transition

make useSidePanel a context

b8f2791

refactor Popovers to (mostly, use same logic for popover anchor)

self review fixes

a128085

anchor alignmnet fixed

f1eadf4

fix lint

8f44ad2

fix onyx canBeMissing

35be53e

Merge branch 'main' into fix/popover-positions-with-help-panel

4365da8

Move side panel provider to components

3ebadfa

Fix imports

b20ae2c

Merge branch 'main' into fix/popover-positions-with-help-panel

69f80d0

fix disable In animation for some reason effing up exit animation lol

783846b

fix lint

06e0caa

blazejkustra suggested changes Aug 12, 2025

View reviewed changes

jmusial added 9 commits August 12, 2025 12:54

Merge branch 'main' into fix/popover-positions-with-help-panel

8c04323

fix tests

7bc771a

fix merge conflicts

3ccf5f7

fix bug when popover was disappearing after a very very specific comb…

ea54987

…ination of actions with side panel

Merge branch 'main' into fix/popover-positions-with-help-panel

963a184

Add jsdoc, lint fixes

1e4fd8f

fix test

2efa368

use context, fix lint

8f8aaac

fix anchor for avatar with image picker

e7de733

mhawryluk approved these changes Aug 19, 2025

View reviewed changes

jmusial added 3 commits August 20, 2025 11:22

Merge branch 'main' into fix/popover-positions-with-help-panel

f281305

Fix after merge

dc065a0

type fix

0a2ea70

jmusial requested a review from blazejkustra August 20, 2025 09:46

blazejkustra approved these changes Aug 20, 2025

View reviewed changes

Merge branch 'main' into fix/popover-positions-with-help-panel

53b43b2

hoangzinh reviewed Aug 27, 2025

View reviewed changes

blazejkustra added 3 commits August 28, 2025 10:20

Remove unused code

dbab5e2

Fix comment typo in Popover component useEffect description

4774780

Add unit tests for usePopoverPosition hook

dd4b36d

Fix infinite loop

f6187a7

blazejkustra requested a review from a team as a code owner August 29, 2025 15:41

trjExpensify approved these changes Aug 30, 2025

View reviewed changes

hoangzinh approved these changes Sep 1, 2025

View reviewed changes

melvin-bot bot requested a review from pecanoro September 1, 2025 22:27

pecanoro approved these changes Sep 2, 2025

View reviewed changes

pecanoro merged commit a28c459 into Expensify:main Sep 2, 2025
21 of 22 checks passed

OSBotify mentioned this pull request Sep 2, 2025

Deploy Checklist: New Expensify 2025-09-02 #69693

Closed

linhvovan29546 mentioned this pull request Sep 3, 2025

Fix keyboard doesn't show up when returning from Help Page to the Status Page #69265

Closed

51 tasks

izarutskaya mentioned this pull request Sep 3, 2025

[Due for payment 2025-10-30] [$250] Profile - Status - The text input is not focused after closing side panel #69766

Closed

16 tasks

linhvovan29546 mentioned this pull request Sep 10, 2025

Fix autofocus issue on closing side panel #70097

Merged

51 tasks

blazejkustra reviewed Dec 1, 2025

View reviewed changes

Conversation

jmusial commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Problems

Solutions

Note

Fixed Issues

Tests

1. Button With Dropdown Menu

2. Dropdown Button

3. Chat avatar

4. Delegated access & Copilot

5. Workspaces list

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

blazejkustra left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

blazejkustra Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

jmusial Aug 12, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

blazejkustra commented Aug 12, 2025

Uh oh!

mhawryluk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

blazejkustra left a comment

Choose a reason for hiding this comment

Uh oh!

hoangzinh Aug 27, 2025

Choose a reason for hiding this comment

Uh oh!

blazejkustra commented Aug 28, 2025

Uh oh!

hoangzinh commented Aug 28, 2025

Uh oh!

blazejkustra commented Aug 29, 2025

Uh oh!

hoangzinh commented Aug 29, 2025

Uh oh!

blazejkustra commented Aug 29, 2025

Uh oh!

trjExpensify left a comment

Choose a reason for hiding this comment

Uh oh!

hoangzinh commented Aug 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

blazejkustra commented Sep 1, 2025

Uh oh!

hoangzinh commented Sep 1, 2025

Uh oh!

blazejkustra commented Sep 1, 2025

Note

Uh oh!

hoangzinh commented Sep 1, 2025

Uh oh!

hoangzinh left a comment

Choose a reason for hiding this comment

Uh oh!

melvin-bot bot commented Sep 1, 2025

Uh oh!

Uh oh!

OSBotify commented Sep 2, 2025

Uh oh!

jmusial commented Aug 6, 2025 •

edited

Loading

hoangzinh commented Aug 31, 2025 •

edited

Loading