From febeeb5dacb14397335b0e4eb2c3006acace7236 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Fri, 19 Jan 2024 05:36:12 +0000
Subject: [PATCH] popover_menu: Fix popover not closed on clicking external
 links.

For example, gear menu was not closed after `Integrations` button
was clicked since we don't have an event handler which opens
`/integrations` in a new tab but we let the browser navigate user
to `/integrations` after clicking on `a href='/integrations'`.

There was no handler for hiding the popover after clicking on such
links, so this commit adds one.
---
 web/src/popover_menus.ts | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/popover_menus.ts b/web/src/popover_menus.ts
index 26d4fc26bc..54e58859bd 100644
--- a/web/src/popover_menus.ts
+++ b/web/src/popover_menus.ts
@@ -358,11 +358,11 @@ export function toggle_popover_menu(
     target: ReferenceElement,
     popover_props: Partial<PopoverProps>,
     options?: {show_as_overlay_on_mobile: boolean},
-): void {
+): PopoverInstance {
     const instance = target._tippy;
     if (instance) {
         instance.hide();
-        return;
+        return instance;
     }
 
     let mobile_popover_props = {};
@@ -382,7 +382,7 @@ export function toggle_popover_menu(
         ];
     }
 
-    tippy(target, {
+    return tippy(target, {
         ...default_popover_props,
         showOnCreate: true,
         ...popover_props,
@@ -409,7 +409,14 @@ export function register_popover_menu(target: string, popover_props: Partial<Pop
         e.preventDefault();
         e.stopPropagation();
 
-        toggle_popover_menu(e.currentTarget, popover_props);
+        // Hide popovers when user clicks on an element which navigates user to a link.
+        // We don't explicitly handle these clicks per element and let browser handle them but in doing so,
+        // we are not able to hide the popover which we would do otherwise.
+        const instance = toggle_popover_menu(e.currentTarget, popover_props);
+        const $popper = $(instance.popper);
+        $popper.on("click", "a[href]", () => {
+            instance.hide();
+        });
     });
 }