fix: Popover toggle #35746
Merged
fix: Popover toggle #35746
+49
−37
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
✨ Files requiring CODEOWNER review ✨🫰 @MetaMask/core-platform (2 files, +2 -2)
🎨 @MetaMask/design-system-engineers (1 files, +21 -20)
🧪 @MetaMask/qa (1 files, +7 -2)
🖥️ @MetaMask/wallet-ux (1 files, +19 -13)
|
📊 Page Load Benchmark ResultsCurrent Commit: 📄 https://metamask.github.io/test-dapp/Samples: 100 Summary
📈 Detailed Results
Results generated automatically by MetaMask CI |
Builds ready [cdf9de2]
UI Startup Metrics (1200 ± 71 ms)
Benchmark value 25 exceeds gate value 23 for chrome browserify home mean firstReactRender Benchmark value 6 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 255 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 34 exceeds gate value 33 for chrome browserify home p95 getState Benchmark value 13 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 23 exceeds gate value 17 for chrome browserify home p95 setupStore Benchmark value 35 exceeds gate value 29 for chrome webpack home mean getState Benchmark value 265 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 14 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 1452 exceeds gate value 1405 for firefox browserify home mean uiStartup Benchmark value 1252 exceeds gate value 1245 for firefox browserify home mean load Benchmark value 1252 exceeds gate value 1239 for firefox browserify home mean domContentLoaded Benchmark value 41 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 29 exceeds gate value 25 for firefox browserify home mean firstReactRender Benchmark value 6 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 10 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 1677 exceeds gate value 1660 for firefox browserify home p95 uiStartup Benchmark value 253 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 120 exceeds gate value 70 for firefox browserify home p95 backgroundConnect Benchmark value 13 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 110 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 31 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 45 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 8 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 277 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 57 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 7 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 365ms | Sum of p95 exceeds: 601.8ms Sum of all benchmark exceeds: 966.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
n3ps
force-pushed
the
n3ps/global-menu-click-target
branch
from
cdf9de2 to
b9b1329
Compare
📊 Page Load Benchmark ResultsCurrent Commit: 📄 https://metamask.github.io/test-dapp/Samples: 100 Summary
📈 Detailed Results
Results generated automatically by MetaMask CI |
Builds ready [b9b1329]
UI Startup Metrics (1234 ± 72 ms)
Benchmark value 26 exceeds gate value 23 for chrome browserify home mean firstReactRender Benchmark value 7 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 1196 exceeds gate value 1190 for chrome browserify home p95 load Benchmark value 1188 exceeds gate value 1180 for chrome browserify home p95 domContentLoaded Benchmark value 261 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 15 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 950 exceeds gate value 940 for chrome browserify home p95 loadScripts Benchmark value 23 exceeds gate value 17 for chrome browserify home p95 setupStore Benchmark value 8 exceeds gate value 7 for chrome webpack home mean initialActions Benchmark value 2484 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 23 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 1441 exceeds gate value 1405 for firefox browserify home mean uiStartup Benchmark value 1242 exceeds gate value 1239 for firefox browserify home mean domContentLoaded Benchmark value 40 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 29 exceeds gate value 25 for firefox browserify home mean firstReactRender Benchmark value 6 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 11 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 1700 exceeds gate value 1660 for firefox browserify home p95 uiStartup Benchmark value 207 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 96 exceeds gate value 70 for firefox browserify home p95 backgroundConnect Benchmark value 8 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 104 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 33 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 43 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 6 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 271 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 51 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 10 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 331ms | Sum of p95 exceeds: 540.8ms Sum of all benchmark exceeds: 871.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
📊 Page Load Benchmark ResultsCurrent Commit: 📄 https://metamask.github.io/test-dapp/Samples: 100 Summary
📈 Detailed Results
Results generated automatically by MetaMask CI |
Builds ready [61f81d5]
UI Startup Metrics (1233 ± 67 ms)
Benchmark value 1065 exceeds gate value 1061 for chrome browserify home mean domContentLoaded Benchmark value 251 exceeds gate value 10 for chrome browserify home mean backgroundConnect Benchmark value 24 exceeds gate value 23 for chrome browserify home mean firstReactRender Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 1182 exceeds gate value 1180 for chrome browserify home p95 domContentLoaded Benchmark value 1182 exceeds gate value 1180 for chrome browserify home p95 firstPaint Benchmark value 266 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 12 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 941 exceeds gate value 940 for chrome browserify home p95 loadScripts Benchmark value 15 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 1434 exceeds gate value 1405 for firefox browserify home mean uiStartup Benchmark value 36 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 28 exceeds gate value 25 for firefox browserify home mean firstReactRender Benchmark value 5 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 13 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 1678 exceeds gate value 1660 for firefox browserify home p95 uiStartup Benchmark value 235 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 80 exceeds gate value 70 for firefox browserify home p95 backgroundConnect Benchmark value 8 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 50 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 106 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 32 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 44 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 5 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 266 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 51 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 9 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 325ms | Sum of p95 exceeds: 486.8ms Sum of all benchmark exceeds: 811.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
n3ps
commented
Sep 9, 2025
| // Close the popover when the "Esc" key is pressed | ||
| if (onPressEscKey) { | ||
| onPressEscKey(); | ||
| useEffect(() => { |
There was a problem hiding this comment.
- The event handlers where used in the useEffect but not in the deps array
n3ps
commented
Sep 9, 2025
| ) { | ||
| if (onClickOutside) { | ||
| onClickOutside(); | ||
| const handleClickOutside = (event: MouseEvent) => { |
n3ps
commented
Sep 9, 2025
| isOpen && | ||
| popoverRef.current && | ||
| !popoverRef.current.contains(event.target as Node) && | ||
| !referenceElement?.contains(event.target as Node) |
There was a problem hiding this comment.
- The trigger (reference) element was not being checked
DDDDDanica
reviewed
Sep 9, 2025
ui/components/multichain/app-header/app-header-unlocked-content.tsx
Outdated
Show resolved
Hide resolved
…t.tsx Co-authored-by: Danica Shen <[email protected]>
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
📊 Page Load Benchmark ResultsCurrent Commit: 📄 https://metamask.github.io/test-dapp/Samples: 100 Summary
📈 Detailed Results
Results generated automatically by MetaMask CI |
Builds ready [0dc8661]
UI Startup Metrics (1224 ± 66 ms)
Benchmark value 26 exceeds gate value 23 for chrome browserify home mean firstReactRender Benchmark value 5 exceeds gate value 1 for chrome browserify home mean initialActions Benchmark value 268 exceeds gate value 18 for chrome browserify home p95 backgroundConnect Benchmark value 14 exceeds gate value 1.2 for chrome browserify home p95 initialActions Benchmark value 2757 exceeds gate value 2454 for chrome webpack home p95 uiStartup Benchmark value 2406 exceeds gate value 2030 for chrome webpack home p95 load Benchmark value 2386 exceeds gate value 2005 for chrome webpack home p95 domContentLoaded Benchmark value 218 exceeds gate value 195 for chrome webpack home p95 getState Benchmark value 20 exceeds gate value 7 for chrome webpack home p95 initialActions Benchmark value 2383 exceeds gate value 1970 for chrome webpack home p95 loadScripts Benchmark value 31 exceeds gate value 25 for firefox browserify home mean backgroundConnect Benchmark value 28 exceeds gate value 25 for firefox browserify home mean firstReactRender Benchmark value 4 exceeds gate value 1 for firefox browserify home mean initialActions Benchmark value 11 exceeds gate value 9 for firefox browserify home mean setupStore Benchmark value 229 exceeds gate value 195 for firefox browserify home p95 domInteractive Benchmark value 7 exceeds gate value 2 for firefox browserify home p95 initialActions Benchmark value 43 exceeds gate value 27 for firefox browserify home p95 setupStore Benchmark value 105 exceeds gate value 100 for firefox webpack home mean domInteractive Benchmark value 31 exceeds gate value 26 for firefox webpack home mean backgroundConnect Benchmark value 44 exceeds gate value 38 for firefox webpack home mean firstReactRender Benchmark value 5 exceeds gate value 1 for firefox webpack home mean initialActions Benchmark value 276 exceeds gate value 156 for firefox webpack home p95 domInteractive Benchmark value 53 exceeds gate value 50 for firefox webpack home p95 firstReactRender Benchmark value 13 exceeds gate value 2 for firefox webpack home p95 initialActions Sum of mean exceeds: 284ms | Sum of p95 exceeds: 1960.8ms Sum of all benchmark exceeds: 2244.8ms Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
mcmire
reviewed
Sep 9, 2025
|
|
||
| // This click will close the menu. | ||
| await headerNavbar.openThreeDotMenu(); | ||
| await headerNavbar.mouseClickOnThreeDotMenu(); |
There was a problem hiding this comment.
It looks like openThreeDotMenu accounts for differences on Firefox vs. Chrome. Do we not need to do that anymore?
There was a problem hiding this comment.
The original test had a flaw itself, it called both methods when only 1 click really mattered because of the popover bug
| setAccountOptionsMenuOpen((previous) => { | ||
| const isMenuOpen = !previous; | ||
| if (isMenuOpen) { | ||
| trackEvent({ |
There was a problem hiding this comment.
Why are we creating a MetaMetrics event in a React state change handler? Shouldn't we do that afterward?
There was a problem hiding this comment.
@mcmire That is existing prod code - see line 143, tracking whenever the menu opens
Was trying to keep the focus of this PR about fixing the toggle
There was a problem hiding this comment.
Gotcha. Does this not work?
setAccountOptionsMenuOpen((previous) => !previous);
if (accountOptionsMenuOpen) {
trackEvent({
event: MetaMetricsEventName.NavMainMenuOpened,
category: MetaMetricsEventCategory.Navigation,
properties: {
location: 'Home',
},
});
}Or does it make sense to move the tracking into a useEffect?
There was a problem hiding this comment.
(This is non-blocking, I will let you decide, but just wanted to point it out in case there is a better way to do this)
There was a problem hiding this comment.
Calling
if (accountOptionsMenuOpen) {
trackEvent({
event: MetaMetricsEventName.NavMainMenuOpened,
category: MetaMetricsEventCategory.Navigation,
properties: {
location: 'Home',
},
});
}
directly like that will skew the tracking especially knowing the extension has existing excessive re-renders
useEffect might work but again susceptible to re-renders
IMO safest option without a full rewrite of this component and popover is the setState and logically close to the button click event
I mean we could also put events on the Menu component itself when it renders but I think these are for another PR
mcmire
approved these changes
Sep 9, 2025
owencraston
approved these changes
Sep 9, 2025
vinnyhoward
approved these changes
Sep 10, 2025
ameliejyc
approved these changes
Sep 10, 2025
brianacnguyen
approved these changes
Sep 10, 2025
chloeYue
approved these changes
Sep 11, 2025
metamaskbot
added
the
release-13.4.0
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes the Popover so it can toggled by the same element that opened it
Changelog
CHANGELOG entry: null
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist