fix: all querySelector should be specific to a grid UID (#823)

- we should always avoid querying the DOM without a grid UID because we might end up querying an element on the wrong grid
ghiscoding · Nov 29, 2022 · bc2b65c · bc2b65c
1 parent a80d6f8
commit bc2b65c
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/packages/composite-editor-component/src/slick-composite-editor.component.ts b/packages/composite-editor-component/src/slick-composite-editor.component.ts
@@ -904,7 +904,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
     this._itemDataContext = editor?.dataContext ?? {}; // keep reference of the item data context
 
     // add extra css styling to the composite editor input(s) that got modified
-    const editorElm = document.querySelector(`.slick-editor-modal [data-editorid=${columnId}]`);
+    const editorElm = this._modalElm.querySelector(`[data-editorid=${columnId}]`);
     if (editorElm?.classList) {
       if (isEditorValueTouched) {
         editorElm.classList.add('modified');

diff --git a/packages/empty-warning-component/src/slick-empty-warning.component.ts b/packages/empty-warning-component/src/slick-empty-warning.component.ts
@@ -67,7 +67,7 @@ export class SlickEmptyWarningComponent implements ExternalResource {
     // when dealing with a grid that has "autoHeight" option, we need to override 2 height that get miscalculated
     // that is because it is not aware that we are adding this slick empty element in this grid DOM
     if (this.gridOptions.autoHeight) {
-      const leftPaneElm = document.querySelector<HTMLDivElement>('.slick-pane.slick-pane-top.slick-pane-left');
+      const leftPaneElm = document.querySelector<HTMLDivElement>(`.${gridUid} .slick-pane.slick-pane-top.slick-pane-left`);
       if (leftPaneElm && leftPaneElm.style && gridCanvasLeftElm && gridCanvasLeftElm.style) {
         const leftPaneHeight = parseInt(leftPaneElm.style.height, 10) || 0; // this field auto calc by row height
 

diff --git a/packages/row-detail-view-plugin/src/slickRowDetailView.ts b/packages/row-detail-view-plugin/src/slickRowDetailView.ts
@@ -721,7 +721,7 @@ export class SlickRowDetailView implements ExternalResource, UniversalRowDetailV
 
     setTimeout(() => {
       // make sure View Row DOM Element really exist before notifying that it's a row that is visible again
-      if (document.querySelector(`.cellDetailView_${item[this._dataViewIdProperty]}`)) {
+      if (document.querySelector(`.${this.gridUid} .cellDetailView_${item[this._dataViewIdProperty]}`)) {
         this.onRowBackToViewportRange.notify({
           grid: this._grid,
           item,