fix

Author: pomahtri

packages/devextreme/js/__internal/grids/data_grid/keyboard_navigation/m_group_panel_keyboard_navigation.ts

@@ -23,6 +23,10 @@ export class GroupPanelKeyboardNavigationController extends ColumnKeyboardNaviga
 
   private groupItemClickHandler(e) {
     const $groupedColumnElement = $(e.originalEvent.target);
+    if (!gridCore.isElementInCurrentGrid(this, $groupedColumnElement)) {
+      return;
+    }
+
     const groupColumn = this._columnsController.columnOption(`groupIndex:${$groupedColumnElement.index()}`);
 
     this.isNeedToHiddenFocusAfterClick = this._columnsController?.allowColumnSorting(groupColumn);

packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts

@@ -408,7 +408,6 @@ const baseFixedColumns = <T extends ModuleType<ColumnsView>>(Base: T) => class B
     return cellElements;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   public getColumnWidths(fixedTableElement?: any, rowIndex?: number) {
     const result = super.getColumnWidths(fixedTableElement, rowIndex);
     const fixedColumns = this.getFixedColumns();
@@ -703,6 +702,11 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewFixedColumnsExten
     if (this._fixedTableElement && this._tableElement) {
       eventsEngine.on(this.element(), 'mouseover mouseout', '.dx-data-row', this.createAction((args) => {
         const { event } = args;
+
+        if (!gridCoreUtils.isElementInCurrentGrid(this, $(event.target))) {
+          return;
+        }
+
         const rowIndex = this.getRowIndex($(event.target).closest('.dx-row'));
         const isHover = event.type === 'mouseover';
 

packages/devextreme/js/__internal/grids/grid_core/editing/m_editing_cell_based.ts

@@ -12,6 +12,7 @@ import type { DeferredObj } from '@js/core/utils/deferred';
 import { Deferred, when } from '@js/core/utils/deferred';
 import { isElementInDom } from '@js/core/utils/dom';
 import { isDefined, isString } from '@js/core/utils/type';
+import gridCoreUtils from '@ts/grids/grid_core/m_utils';
 import type { RowsView } from '@ts/grids/grid_core/views/m_rows_view';
 
 import type { ModuleType } from '../m_types';
@@ -419,7 +420,6 @@ const editingControllerExtender = (Base: ModuleType<EditingController>) => class
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected _prepareChange(options, value, text) {
     const $cellElement = $(options.cellElement);
 
@@ -516,7 +516,6 @@ const editingControllerExtender = (Base: ModuleType<EditingController>) => class
     }
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected _allowRowAdding(params) {
     if (this.isBatchEditMode()) {
       return true;
@@ -694,7 +693,11 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewEditingCellBasedE
     const editingController = this._editingController;
 
     if (editingController.isCellOrBatchEditMode() && this.option('editing.allowUpdating')) {
-      eventsEngine.on($table, addNamespace(holdEvent.name, 'dxDataGridRowsView'), `td:not(.${EDITOR_CELL_CLASS})`, this.createAction(() => {
+      eventsEngine.on($table, addNamespace(holdEvent.name, 'dxDataGridRowsView'), `td:not(.${EDITOR_CELL_CLASS})`, this.createAction((e) => {
+        if (!gridCoreUtils.isElementInCurrentGrid(this, $(e.event.target))) {
+          return;
+        }
+
         if (editingController.isEditing()) {
           editingController.closeEditCell();
         }

packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts

@@ -894,6 +894,10 @@ export const rowsViewSelectionExtenderMixin = (Base: ModuleType<RowsView>) => cl
       if (that.option(SHOW_CHECKBOXES_MODE) === 'onLongTap' || !supportUtils.touch) {
         // TODO Not working timeout by hold when it is larger than other timeouts by hold
         eventsEngine.on($table, addNamespace(holdEvent.name, 'dxDataGridRowsView'), `.${DATA_ROW_CLASS}`, that.createAction((e) => {
+          if (!gridCoreUtils.isElementInCurrentGrid(that, $(e.event.target))) {
+            return;
+          }
+
           processLongTap(that.component, e.event);
 
           e.event.stopPropagation();

packages/devextreme/js/__internal/grids/grid_core/sorting/m_sorting.ts

@@ -8,6 +8,7 @@ import { isDefined } from '@js/core/utils/type';
 import type { ColumnHeadersView } from '@ts/grids/grid_core/column_headers/m_column_headers';
 import type { HeaderPanel } from '@ts/grids/grid_core/header_panel/m_header_panel';
 import type { ModuleType } from '@ts/grids/grid_core/m_types';
+import gridCoreUtils from '@ts/grids/grid_core/m_utils';
 
 import sortingMixin from './m_sorting_mixin';
 
@@ -35,6 +36,10 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
 
     if (row.rowType === 'header') {
       eventsEngine.on($row, addNamespace(clickEventName, COLUMN_HEADERS_VIEW_NAMESPACE), 'td', this.createAction((e) => {
+        if (!gridCoreUtils.isElementInCurrentGrid(this, $(e.event.target))) {
+          return;
+        }
+
         this._processHeaderAction(e.event, $row);
       }));
     }
@@ -51,7 +56,7 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
     const $cellElementFromEvent = $(event.currentTarget);
     const rowIndex = $cellElementFromEvent.parent().index();
     let columnIndex = -1;
-    // eslint-disable-next-line array-callback-return
+
     [].slice.call(that.getCellElements(rowIndex)).some(($cellElement, index) => {
       if ($cellElement === $cellElementFromEvent.get(0)) {
         columnIndex = index;

packages/devextreme/js/__internal/grids/grid_core/views/m_columns_view.ts

@@ -79,6 +79,10 @@ const subscribeToRowEvents = function (that, $table) {
   }
 
   eventsEngine.on($table, 'touchstart touchend', '.dx-row', (e) => {
+    if (!gridCoreUtils.isElementInCurrentGrid(that, $(e.event.target))) {
+      return;
+    }
+
     clearTimeout(timeoutId);
     if (e.type === 'touchstart') {
       touchTarget = e.target;
@@ -92,6 +96,10 @@ const subscribeToRowEvents = function (that, $table) {
   eventsEngine.on($table, [clickEventName, dblclickEvent, pointerEvents.down].join(' '), '.dx-row', that.createAction((e) => {
     const { event } = e;
 
+    if (!gridCoreUtils.isElementInCurrentGrid(that, $(event.target))) {
+      return;
+    }
+
     if (touchTarget) {
       event.target = touchTarget;
       event.currentTarget = touchCurrentTarget;
@@ -389,12 +397,17 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
       eventsEngine.on($table, 'mousemove', '.dx-row > td', this.createAction((args) => {
         const e = args.event;
         const $element = $(e.target);
+
+        if (!gridCoreUtils.isElementInCurrentGrid(this, $element)) {
+          return;
+        }
+
         const $cell = $(e.currentTarget);
         const $row = $cell.parent();
         const visibleColumns = this._columnsController.getVisibleColumns();
         const rowOptions: any = $row.data('options');
         const columnIndex = $cell.index();
-        // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+
         const cellOptions = rowOptions && rowOptions.cells && rowOptions.cells[columnIndex];
         const column = cellOptions ? cellOptions.column : visibleColumns[columnIndex];
 
@@ -460,21 +473,36 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
     };
 
     eventsEngine.on($table, 'mouseover', '.dx-row > td', (e) => {
+      if (!gridCoreUtils.isElementInCurrentGrid(this, $(e.event.target))) {
+        return;
+      }
+
       const options = getOptions(e);
       options && this.executeAction('onCellHoverChanged', options);
     });
 
     eventsEngine.on($table, 'mouseout', '.dx-row > td', (e) => {
+      if (!gridCoreUtils.isElementInCurrentGrid(this, $(e.event.target))) {
+        return;
+      }
+
       const options = getOptions(e);
       options && this.executeAction('onCellHoverChanged', options);
     });
 
     eventsEngine.on($table, clickEventName, '.dx-row > td', (e) => {
+      if (!gridCoreUtils.isElementInCurrentGrid(this, $(e.event.target))) {
+        return;
+      }
+
       const options = getOptions(e);
       options && this.executeAction('onCellClick', options);
     });
 
     eventsEngine.on($table, dblclickEvent, '.dx-row > td', (e) => {
+      if (!gridCoreUtils.isElementInCurrentGrid(this, $(e.event.target))) {
+        return;
+      }
       const options = getOptions(e);
       options && this.executeAction('onCellDblClick', options);
     });
@@ -1104,7 +1132,6 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
   }
 
   private needWaitAsyncTemplates() {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-boolean-literal-compare
     return this.option('templatesRenderAsynchronously') && this.option('renderAsync') === false;
   }
 
@@ -1154,11 +1181,9 @@ export class ColumnsView extends ColumnStateMixin(modules.View) {
     const result: number[] = [];
     const cellElements = $cellElements.toArray();
 
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
     (cellElements as HTMLElement[]).forEach((cell) => {
       let width = cell.offsetWidth;
 
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       if ((cell as any).getBoundingClientRect) {
         const rect = getBoundingRect(cell);