fix(mobile): relayout would sometimes hide the context menu

src/public/app/menus/context_menu.ts

@@ -32,25 +32,24 @@ export type MenuHandler<T extends CommandNames> = (item: MenuCommandItem<T>, e:
 
 class ContextMenu {
 
-    private $widget!: JQuery<HTMLElement>;
+    private $widget: JQuery<HTMLElement>;
+    private $cover: JQuery<HTMLElement>;
     private dateContextMenuOpenedMs: number;
     private options?: ContextMenuOptions<any>;
     private isMobile: boolean;
 
     constructor() {
         this.$widget = $("#context-menu-container");
+        this.$cover = $("#context-menu-cover");
         this.$widget.addClass("dropend");
         this.dateContextMenuOpenedMs = 0;
         this.isMobile = utils.isMobile();
 
-        $(document).on('click', (e) => {
-            if (this.isMobile && $(e.target).closest("#context-menu-container").length) {
-                return;
+        if (this.isMobile) {
+            this.$cover.on("click", this.hide);
+        } else {
+            $(document).on('click', (e) => this.hide);
         }
-
-            console.log("Hide from ", e.target);
-            this.hide();
-        });
     }
 
     async show<T extends CommandNames>(options: ContextMenuOptions<T>) {
@@ -62,6 +61,8 @@ class ContextMenu {
             await this.hide();
         }
 
+        this.$cover.addClass("show");
+
         this.$widget.empty();
 
         this.addItems(this.$widget, options.items);
@@ -223,7 +224,8 @@ class ContextMenu {
             // see https://github.com/zadam/trilium/pull/3805 for details
             await timeout(100);
             this.$widget.removeClass("show");
-            this.$widget.hide()
+            this.$cover.removeClass("show");
+            this.$widget.hide();
         }
     }
 }

src/public/stylesheets/style.css

@@ -954,6 +954,16 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     cursor: row-resize;
 }
 
+#context-menu-cover.show {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    background: rgba(0, 0, 0, 0.1);
+}
+
 #context-menu-container {
     max-height: 100vh;
     /* !!! Cannot set overflow: auto, submenus will break !!! */

src/views/mobile.ejs

@@ -100,6 +100,8 @@
 
 <div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
 
+<div id="context-menu-cover"></div>
+
 <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
 <script type="text/javascript">