fix(gridMenu): remove GridMenu from DOM after closing it (#1169)

* fix(gridMenu): remove GridMenu from DOM after closing it
ghiscoding · Nov 1, 2023 · 87b242f · 87b242f
1 parent bc02092
commit 87b242f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts b/packages/common/src/extensions/__tests__/slickGridMenu.spec.ts
@@ -550,7 +550,7 @@ describe('GridMenuControl', () => {
         expect(control.menuElement).toBeFalsy();
         expect(pubSubSpy).toHaveBeenCalledWith('onGridMenuBeforeMenuShow', {
           grid: gridStub,
-          menu: undefined,
+          menu: null,
           allColumns: columnsMock,
           columns: columnsMock,
           visibleColumns: columnsMock
@@ -589,7 +589,7 @@ describe('GridMenuControl', () => {
         expect(control.menuElement).toBeFalsy();
         expect(pubSubSpy).toHaveBeenCalledWith('onGridMenuAfterMenuShow', {
           grid: gridStub,
-          menu: undefined,
+          menu: null,
           allColumns: columnsMock,
           columns: columnsMock,
           visibleColumns: columnsMock

diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts
@@ -163,6 +163,7 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
   deleteMenu() {
     this._bindEventService.unbindAll();
     this._menuElm?.remove();
+    this._menuElm = null;
     this._gridMenuButtonElm?.remove();
     if (this._headerElm) {
       // put back grid header original width (fixes width and frozen+gridMenu on left header)
@@ -440,6 +441,7 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
 
     // empty the entire menu so that it's recreated every time it opens
     emptyElement(this._menuElm);
+    this._menuElm?.remove();
 
     if (this._addonOptions) {
       const callbackArgs = {

diff --git a/test/cypress/e2e/example20.cy.ts b/test/cypress/e2e/example20.cy.ts
@@ -1,4 +1,4 @@
-describe('Example 20 - Basic grid inside a Shadow DOM', { retries: 0 }, () => {
+describe('Example 20 - Basic grid inside a Shadow DOM', { retries: 1 }, () => {
   const fullTitles = ['Title', 'Duration (days)', '% Complete', 'Start', 'Finish', 'Effort Driven'];
 
   it('should display Example title', () => {