fix(demo): latest change with Filter container breaks other demos

- after opening Example 7 all filters modal and then going to another Example breaks the multiple-select filter (probably other filters too). The issue was caused by the DOMPurify option of `RETURN_DOM` which was caused by the creation of a second `body` within the current `body`
ghiscoding · Dec 17, 2021 · 129cc78 · 129cc78
1 parent 06814f3
commit 129cc78
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 55 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example07.scss
@@ -0,0 +1,11 @@
+#modal-allFilter-table {
+  display: table;
+}
+#modal-allFilter-table .row {
+    display: table-row;
+}
+#modal-allFilter-table .column {
+    display: table-cell;
+    vertical-align: top;
+    width: 40%;
+}
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
@@ -10,9 +10,11 @@ import {
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-import { TranslateService } from '../translate.service';
 import * as DOMPurify from 'dompurify';
+
+import { TranslateService } from '../translate.service';
 import { ExampleGridOptions } from './example-grid-options';
+import './example07.scss';
 
 export class Example7 {
   private _bindingEventService: BindingEventService;
@@ -318,69 +320,56 @@ export class Example7 {
 
   allFilters() {
     const grid = this.sgb;
-    const modalHtml: string = `<div id="modal-allFilter" class="modal is-active" >
-        <style type="text/css">
-            #modal-allFilter-table {
-              display: table;
-            }
-
-            #modal-allFilter-table .row {
-                display: table-row;
-            }
-
-            #modal-allFilter-table .column {
-                display: table-cell;
-                vertical-align: top;
-                width: 40%;
-            }
-        </style>
-        <div class="modal-background"></div>
-        <div class="modal-card">
-            <header class="modal-card-head">
-                <p class="modal-card-title">Filter</p>
-                <button class="delete btn-close" aria-label="close"></button>
-            </header>
-            <section class="modal-card-body">
-              <div class="slickgrid-container grid-pane">
-                <div id="modal-allFilter-content">
-                  <div id="modal-allFilter-table" class="slick-headerrow ui-state-default">
-                  </div>
-                </div>
+    const modalHtml = `<div id="modal-allFilter" class="modal is-active">
+      <div class="modal-background"></div>
+      <div class="modal-card">
+        <header class="modal-card-head">
+          <p class="modal-card-title">Filter</p>
+          <button class="delete btn-close" aria-label="close"></button>
+        </header>
+        <section class="modal-card-body">
+          <div class="slickgrid-container grid-pane">
+            <div id="modal-allFilter-content">
+              <div id="modal-allFilter-table" class="slick-headerrow ui-state-default">
               </div>
-            </section>
-            <footer class="modal-card-foot">
-              <button class="button btn-close">Close</button>
-              <button id="btn-clear-all" class="button">Clear All Filter</button>
-              <button class="button btn-close is-success">Search</button>
-            </footer>
-        </div>
+            </div>
+          </div>
+        </section>
+        <footer class="modal-card-foot">
+          <button class="button btn-close">Close</button>
+          <button id="btn-clear-all" class="button">Clear All Filter</button>
+          <button class="button btn-close is-success">Search</button>
+        </footer>
+      </div>
     </div>`;
 
-    document.body.appendChild(DOMPurify.sanitize(modalHtml, { RETURN_DOM: true }));
+    $(DOMPurify.sanitize(modalHtml)).appendTo('body');
 
-    $(".btn-close").on('click', function () {
+    $('.btn-close').on('click', function () {
       if (grid?.slickGrid.getOptions().showHeaderRow) {
         grid?.showHeaderRow(true);
       }
-      document.getElementById("modal-allFilter").remove();
+      document.getElementById('modal-allFilter').remove();
     });
-    $("#btn-clear-all").on('click', function () {
-      document.getElementById("modal-allFilter").remove();
+
+    $('#btn-clear-all').on('click', function () {
+      document.getElementById('modal-allFilter').remove();
       grid?.filterService.clearFilters();
     });
 
     for (const columnFilter of grid?.columnDefinitions) {
       if (columnFilter.filterable) {
         const filterElm = `modal-allfilter-${columnFilter.id}`;
-        $('#modal-allFilter-table').append(`
-        <div class="row slick-headerrow-columns">
-          <div class="column">${columnFilter.name}</div><div id="${filterElm}" class="column ui-state-default slick-headerrow-column"></div>
-        </div>
-        `);
+        $('#modal-allFilter-table')
+          .append(
+            `<div class="row slick-headerrow-columns">
+              <div class="column">${columnFilter.name}</div>
+              <div id="${filterElm}" class="column ui-state-default slick-headerrow-column"></div>
+            </div>`
+          );
         grid?.filterService.drawFilterTemplate(columnFilter, `#${filterElm}`);
       }
     }
-
   }
 
   changeCompletedOption(dataContext: any, newValue: boolean) {

diff --git a/packages/common/src/services/__tests__/filter.service.spec.ts b/packages/common/src/services/__tests__/filter.service.spec.ts
@@ -1635,6 +1635,7 @@ describe('FilterService', () => {
       ];
       sharedService.allColumns = [mockColumn1, mockColumn2, mockColumn3];
     });
+
     it('should Draw DOM Element Filter on custom HTML element by string id', async () => {
       service.init(gridStub);
       service.bindLocalOnFilter(gridStub);
@@ -1643,12 +1644,12 @@ describe('FilterService', () => {
       await service.updateFilters(mockNewFilters);
 
       const columnFilterMetadada = service.drawFilterTemplate('name', `#${DOM_ELEMENT_ID}`);
-
       const filterElm = document.body.querySelector<HTMLDivElement>(`#${DOM_ELEMENT_ID}`);
-      expect(filterElm).toBeTruthy();
 
+      expect(filterElm).toBeTruthy();
       expect(columnFilterMetadada.columnDef.id).toBe('name');
     });
+
     it('should Draw DOM Element Filter on custom HTML element by string id with searchTerms', async () => {
       service.init(gridStub);
       service.bindLocalOnFilter(gridStub);
@@ -1657,12 +1658,12 @@ describe('FilterService', () => {
       await service.updateFilters(mockNewFilters);
 
       const columnFilterMetadada = service.drawFilterTemplate('firstName', `#${DOM_ELEMENT_ID}`);
-
       const filterElm = document.body.querySelector<HTMLDivElement>(`#${DOM_ELEMENT_ID}`);
-      expect(filterElm).toBeTruthy();
 
+      expect(filterElm).toBeTruthy();
       expect(columnFilterMetadada.columnDef.id).toBe('firstName');
     });
+
     it('should Draw DOM Element Filter on custom HTML element by HTMLDivElement', async () => {
       service.init(gridStub);
       service.bindLocalOnFilter(gridStub);
@@ -1672,14 +1673,12 @@ describe('FilterService', () => {
 
       const filterContainerElm: HTMLDivElement = document.querySelector(`#${DOM_ELEMENT_ID}`);
       const columnFilterMetadada = service.drawFilterTemplate('isActive', filterContainerElm);
-
       const filterElm = document.body.querySelector<HTMLDivElement>(`#${DOM_ELEMENT_ID}`);
-      expect(filterElm).toBeTruthy();
 
+      expect(filterElm).toBeTruthy();
       expect(columnFilterMetadada.columnDef.id).toBe('isActive');
     });
 
-
     it('should Draw DOM Element Filter on custom HTML element return null', async () => {
       service.init(gridStub);
       service.bindLocalOnFilter(gridStub);
@@ -1695,7 +1694,6 @@ describe('FilterService', () => {
       expect(columnFilterMetadada1).toBeNull();
       expect(columnFilterMetadada2).toBeNull();
       expect(columnFilterMetadada3).toBeNull();
-
     });
   });