Fix context menu / header filter open & close behavior (#18456)

* fix context menu / header filter open & close behavior * fix order * fix * fix typing
microsoft · Nov 26, 2024 · 5a220e2 · 5a220e2
1 parent d4697d4
commit 5a220e2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/src/reactviews/pages/QueryResult/table/plugins/contextMenu.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/contextMenu.plugin.ts
@@ -23,6 +23,7 @@ export class ContextMenu<T extends Slick.SlickData> {
         QueryResultWebviewState,
         QueryResultReducers
     >;
+    private activeContextMenu: JQuery<HTMLElement> | null = null;
 
     constructor(
         uri: string,
@@ -42,12 +43,23 @@ export class ContextMenu<T extends Slick.SlickData> {
         this.handler.subscribe(this.grid.onContextMenu, (e: Event) =>
             this.handleContextMenu(e),
         );
+        this.handler.subscribe(this.grid.onHeaderClick, (e: Event) =>
+            this.headerClickHandler(e),
+        );
     }
 
     public destroy() {
         this.handler.unsubscribeAll();
     }
 
+    private headerClickHandler(e: Event): void {
+        if (!(jQuery(e.target!) as any).closest("#contextMenu").length) {
+            if (this.activeContextMenu) {
+                this.activeContextMenu.hide();
+            }
+        }
+    }
+
     private handleContextMenu(e: Event): void {
         e.preventDefault();
         let mouseEvent = e as MouseEvent;
@@ -72,14 +84,17 @@ export class ContextMenu<T extends Slick.SlickData> {
             .css("left", mouseEvent.pageX)
             .show();
 
-        jQuery("body").one("click", function () {
+        this.activeContextMenu = $contextMenu;
+        jQuery("body").one("click", () => {
             $contextMenu.hide();
+            this.activeContextMenu = null;
         });
 
         $contextMenu.on("click", "li", async (event) => {
             const action = jQuery(event.target).data("action");
             await this.handleMenuAction(action);
             $contextMenu.hide(); // Hide the menu after an action is clicked
+            this.activeContextMenu = null;
         });
     }
 

diff --git a/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts b/src/reactviews/pages/QueryResult/table/plugins/headerFilter.plugin.ts
@@ -134,6 +134,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
                     e.stopPropagation();
                     e.preventDefault();
                     await this.showFilter(elDivElement);
+                    this.grid.onHeaderClick.notify();
                 },
             );
         }
@@ -261,6 +262,11 @@ export class HeaderFilter<T extends Slick.SlickData> {
             }
         });
 
+        jQuery(document).on("contextmenu", () => {
+            this.activePopup!.fadeOut();
+            this.activePopup = null;
+        });
+
         // Close the pop-up when the close-popup button is clicked
         jQuery(document).on(
             "click",