fix: Popover toggle (#35746)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Fixes the Popover so it can toggled by the same element that opened it

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/35746?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

1. Home screen
2. Click menu button to open
3. Click same button to close

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**


<!-- [screenshots/recordings] -->

### **After**





<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: HJetpoluru <[email protected]>
Co-authored-by: Danica Shen <[email protected]>

Author: 3 people

test/e2e/page-objects/pages/header-navbar.ts

@@ -108,6 +108,11 @@ class HeaderNavbar {
     }
   }
 
+  async mouseClickOnThreeDotMenu(): Promise<void> {
+    console.log('Clicking three dot menu using mouse move');
+    await this.driver.clickElementUsingMouseMove(this.threeDotMenuButton);
+  }
+
   async openPermissionsPage(): Promise<void> {
     console.log('Open permissions page in header navbar');
     await this.openThreeDotMenu();
@@ -140,12 +145,12 @@ class HeaderNavbar {
 
   async clickNotificationsOptions(): Promise<void> {
     console.log('Click notifications options');
-    await this.openThreeDotMenu();
+    await this.mouseClickOnThreeDotMenu();
     await this.driver.clickElement(this.notificationsButton);
   }
 
   async checkNotificationCountInMenuOption(count: number): Promise<void> {
-    await this.openThreeDotMenu();
+    await this.mouseClickOnThreeDotMenu();
     await this.driver.findElement({
       css: this.notificationCountOption,
       text: count.toString(),

test/e2e/snaps/test-snap-cronjob-duration.spec.ts

@@ -40,7 +40,7 @@ describe('Test Snap Cronjob Duration', function () {
         await headerNavbar.checkNotificationCountInMenuOption(1);
 
         // This click will close the menu.
-        await headerNavbar.openThreeDotMenu();
+        await headerNavbar.mouseClickOnThreeDotMenu();
 
         // Click the notification options and validate the message in the
         // notification list.

test/e2e/snaps/test-snap-notification.spec.ts

@@ -85,7 +85,7 @@ describe('Test Snap Notification', function () {
         await headerNavbar.checkNotificationCountInMenuOption(1);
 
         // this click will close the menu
-        await headerNavbar.openThreeDotMenu();
+        await headerNavbar.mouseClickOnThreeDotMenu();
 
         // click the notification options
         await headerNavbar.clickNotificationsOptions();

ui/components/component-library/popover/popover.tsx

@@ -86,29 +86,30 @@ export const Popover: PopoverComponent = React.forwardRef(
       width: matchWidth ? referenceElement?.clientWidth : 'auto',
     };
 
-    // Esc key press
-    const handleEscKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        // Close the popover when the "Esc" key is pressed
-        if (onPressEscKey) {
-          onPressEscKey();
+    useEffect(() => {
+      // Esc key press
+      const handleEscKey = (event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          // Close the popover when the "Esc" key is pressed
+          if (onPressEscKey) {
+            onPressEscKey();
+          }
         }
-      }
-    };
+      };
 
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        isOpen &&
-        popoverRef.current &&
-        !popoverRef.current.contains(event.target as Node)
-      ) {
-        if (onClickOutside) {
-          onClickOutside();
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          isOpen &&
+          popoverRef.current &&
+          !popoverRef.current.contains(event.target as Node) &&
+          !referenceElement?.contains(event.target as Node)
+        ) {
+          if (onClickOutside) {
+            onClickOutside();
+          }
         }
-      }
-    };
+      };
 
-    useEffect(() => {
       document.addEventListener('keydown', handleEscKey, { capture: true });
       if (isOpen) {
         document.addEventListener('click', handleClickOutside, {
@@ -122,7 +123,7 @@ export const Popover: PopoverComponent = React.forwardRef(
         document.removeEventListener('keydown', handleEscKey);
         document.removeEventListener('click', handleClickOutside);
       };
-    }, [onPressEscKey, isOpen, onClickOutside]);
+    }, [onPressEscKey, isOpen, onClickOutside, referenceElement]);
 
     const PopoverContent = (
       <Box

ui/components/multichain/app-header/app-header-unlocked-content.tsx

@@ -139,15 +139,21 @@ export const AppHeaderUnlockedContent = ({
     origin &&
     origin !== browser.runtime.id;
 
-  const handleMainMenuOpened = () => {
-    trackEvent({
-      event: MetaMetricsEventName.NavMainMenuOpened,
-      category: MetaMetricsEventCategory.Navigation,
-      properties: {
-        location: 'Home',
-      },
+  const handleMainMenuToggle = () => {
+    setAccountOptionsMenuOpen((previous) => {
+      const isMenuOpen = !previous;
+      if (isMenuOpen) {
+        trackEvent({
+          event: MetaMetricsEventName.NavMainMenuOpened,
+          category: MetaMetricsEventCategory.Navigation,
+          properties: {
+            location: 'Home',
+          },
+        });
+      }
+
+      return isMenuOpen;
     });
-    setAccountOptionsMenuOpen(true);
   };
 
   const handleConnectionsRoute = () => {
@@ -284,25 +290,25 @@ export const AppHeaderUnlockedContent = ({
             style={{ position: 'relative' }}
           >
             {!accountOptionsMenuOpen && (
-              <Box onClick={() => handleMainMenuOpened()}>
+              <Box onClick={handleMainMenuToggle}>
                 <NotificationsTagCounter noLabel />
               </Box>
             )}
             <ButtonIcon
               iconName={IconName.Menu}
               data-testid="account-options-menu-button"
               ariaLabel={t('accountOptions')}
-              onClick={() => {
-                handleMainMenuOpened();
-              }}
+              onClick={handleMainMenuToggle}
               size={ButtonIconSize.Lg}
             />
           </Box>
         </Box>
         <GlobalMenu
           anchorElement={menuRef.current}
           isOpen={accountOptionsMenuOpen}
-          closeMenu={() => setAccountOptionsMenuOpen(false)}
+          closeMenu={() => {
+            setAccountOptionsMenuOpen(false);
+          }}
         />
         <VisitSupportDataConsentModal
           isOpen={showSupportDataConsentModal}