Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Aman Agrawal 2024-01-19 05:36:12 +00:00 committed by Tim Abbott
parent 1f79e6294f
commit febeeb5dac
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/popover_menus.ts
View File

@ -358,11 +358,11 @@ export function toggle_popover_menu(
target: ReferenceElement, target: ReferenceElement,
popover_props: Partial<PopoverProps>, popover_props: Partial<PopoverProps>,
options?: {show_as_overlay_on_mobile: boolean}, options?: {show_as_overlay_on_mobile: boolean},
): void { ): PopoverInstance {
const instance = target._tippy; const instance = target._tippy;
if (instance) { if (instance) {
instance.hide(); instance.hide();
return; return instance;
} }
let mobile_popover_props = {}; let mobile_popover_props = {};
@ -382,7 +382,7 @@ export function toggle_popover_menu(
]; ];
} }
tippy(target, { return tippy(target, {
...default_popover_props, ...default_popover_props,
showOnCreate: true, showOnCreate: true,
...popover_props, ...popover_props,
@ -409,7 +409,14 @@ export function register_popover_menu(target: string, popover_props: Partial<Pop
e.preventDefault(); e.preventDefault();
e.stopPropagation(); 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();
});
}); });
} }