From 66da0a0945ec8bfc9c7ce83dff1883ad94f1a833 Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Wed, 24 Jul 2024 08:20:58 +0000 Subject: [PATCH] popover_menus: Fix user card moves to top left of screen. When the user card is displayed via right sidebar, the reference can be lost due to it being updated or hidden on window resize. To fix it, we show user card as an overlay when we cannot find the reference. Another solution would have been to relocate the reference and update it for the popover but that is not naturally supported by tippy once the popover has been displayed. --- web/src/popover_menus.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/web/src/popover_menus.ts b/web/src/popover_menus.ts index 75fe95010e..2c90b38873 100644 --- a/web/src/popover_menus.ts +++ b/web/src/popover_menus.ts @@ -191,16 +191,26 @@ export const default_popover_props: Partial = { const instance = (state.elements.reference as tippy.ReferenceElement)._tippy!; const $popover = $(state.elements.popper); const $tippy_box = $popover.find(".tippy-box"); - if ($tippy_box.hasClass("show-when-reference-hidden")) { - return; - } - // $tippy_box[0].hasAttribute("data-reference-hidden"); is the real check // but linter wants us to write it like this. const is_reference_outside_window = Object.hasOwn( $tippy_box[0]!.dataset, "referenceHidden", ); + + if ($tippy_box.hasClass("show-when-reference-hidden")) { + // Show user card popover as an overlay if we are not sure about position of the + // reference. This can happen when popover reference has been replaced or hidden. + if ( + is_reference_outside_window && + $tippy_box.find("#user_card_popover").length > 0 + ) { + $("body").append($("
").attr("id", "popover-overlay-background")); + instance.setProps(get_props_for_popover_centering(instance.props)); + } + return; + } + if (is_reference_outside_window) { hide_current_popover_if_visible(instance); return;