fix(common): context menu should close when clicking another cell

packages/common/src/extensions/__tests__/slickContextMenu.spec.ts

@@ -155,7 +155,6 @@ const treeDataServiceStub = {
 } as unknown as TreeDataService;
 
 describe('ContextMenu Plugin', () => {
-  const consoleWarnSpy = jest.spyOn(global.console, 'warn').mockReturnValue();
   let backendUtilityService: BackendUtilityService;
   let extensionUtility: ExtensionUtility;
   let translateService: TranslateServiceStub;

packages/common/src/extensions/__tests__/slickGridMenu.spec.ts

@@ -146,11 +146,8 @@ describe('GridMenuControl', () => {
 
   describe('with I18N Service', () => {
     const consoleErrorSpy = jest.spyOn(global.console, 'error').mockReturnValue();
-    const consoleWarnSpy = jest.spyOn(global.console, 'warn').mockReturnValue();
-    // let divElement;
 
     beforeEach(() => {
-      // divElement = document.createElement('div');
       div = document.createElement('div');
       div.innerHTML = template;
       document.body.appendChild(div);

packages/common/src/extensions/__tests__/slickHeaderButtons.spec.ts

@@ -54,7 +54,6 @@ const columnsMock: Column[] = [
 ];
 
 describe('HeaderButton Plugin', () => {
-  const consoleWarnSpy = jest.spyOn(global.console, 'warn').mockReturnValue();
   let backendUtilityService: BackendUtilityService;
   let extensionUtility: ExtensionUtility;
   let translateService: TranslateServiceStub;

packages/common/src/extensions/slickCellMenu.ts

@@ -137,7 +137,7 @@ export class SlickCellMenu extends MenuFromCellBaseClass<CellMenu> {
       }
 
       // Hide the menu on outside click.
-      this._bindEventService.bind(document.body, 'mousedown', this.handleBodyMouseDown.bind(this) as EventListener);
+      this._bindEventService.bind(document.body, 'mousedown', this.handleBodyMouseDown.bind(this) as EventListener, { capture: true });
     }
   }
 

packages/common/src/extensions/slickColumnPicker.ts

@@ -116,7 +116,7 @@ export class SlickColumnPicker {
     this._bindEventService.bind(this._menuElm, 'click', handleColumnPickerItemClick.bind(this) as EventListener, undefined, 'parent-menu');
 
     // Hide the menu on outside click.
-    this._bindEventService.bind(document.body, 'mousedown', this.handleBodyMouseDown.bind(this) as EventListener);
+    this._bindEventService.bind(document.body, 'mousedown', this.handleBodyMouseDown.bind(this) as EventListener, { capture: true });
 
     // destroy the picker if user leaves the page
     this._bindEventService.bind(document.body, 'beforeunload', this.dispose.bind(this) as EventListener);

packages/common/src/extensions/slickContextMenu.ts

@@ -142,7 +142,7 @@ export class SlickContextMenu extends MenuFromCellBaseClass<ContextMenu> {
       }
 
       // Hide the menu on outside click.
-      this._bindEventService.bind(document.body, 'mousedown', this.handleBodyMouseDown.bind(this) as EventListener);
+      this._bindEventService.bind(document.body, 'mousedown', this.handleBodyMouseDown.bind(this) as EventListener, { capture: true });
     }
   }
 

packages/common/src/extensions/slickGridMenu.ts

@@ -221,7 +221,7 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
       this.translateTitleLabels(this.sharedService.gridOptions.gridMenu);
 
       // hide the menu on outside click.
-      this._bindEventService.bind(document.body, 'mousedown', this.handleBodyMouseDown.bind(this) as EventListener);
+      this._bindEventService.bind(document.body, 'mousedown', this.handleBodyMouseDown.bind(this) as EventListener, { capture: true });
 
       // destroy the picker if user leaves the page
       this._bindEventService.bind(document.body, 'beforeunload', this.dispose.bind(this) as EventListener);

packages/common/src/extensions/slickHeaderMenu.ts

@@ -84,7 +84,7 @@ export class SlickHeaderMenu extends MenuBaseClass<HeaderMenu> {
     this.grid.setColumns(this.grid.getColumns());
 
     // hide the menu when clicking outside the grid
-    this._bindEventService.bind(document.body, 'mousedown', this.handleBodyMouseDown.bind(this) as EventListener);
+    this._bindEventService.bind(document.body, 'mousedown', this.handleBodyMouseDown.bind(this) as EventListener, { capture: true });
   }
 
   /** Dispose (destroy) of the plugin */

test/cypress/e2e/example12.cy.ts

@@ -111,12 +111,15 @@ describe('Example 12 - Composite Editor Modal', { retries: 1 }, () => {
     // change Completed
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).click();
     cy.get('.editor-completed').check();
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1);
 
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).click();
     cy.get('.editor-completed').check();
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1);
 
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).click();
     cy.get('.editor-completed').check();
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1);
   });
 
   it('should be able to change "Finish" values of row indexes 0-2', () => {