From 129cc78ac34ad632f2a265d49a631e04b119250b Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Fri, 17 Dec 2021 01:12:01 -0500 Subject: [PATCH] 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` --- .../src/examples/example07.scss | 11 +++ .../src/examples/example07.ts | 83 ++++++++----------- .../services/__tests__/filter.service.spec.ts | 14 ++-- 3 files changed, 53 insertions(+), 55 deletions(-) create mode 100644 examples/webpack-demo-vanilla-bundle/src/examples/example07.scss diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example07.scss new file mode 100644 index 000000000..169574547 --- /dev/null +++ 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%; +} \ No newline at end of file diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts index c90655312..279943ef0 100644 --- 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 = ``; - 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(` -
-
${columnFilter.name}
-
- `); + $('#modal-allFilter-table') + .append( + `
+
${columnFilter.name}
+
+
` + ); 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 index 915d7f3ea..016d7511e 100644 --- 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(`#${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(`#${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(`#${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(); - }); });