TreeList - Expand/collapse mechanism breaks after dragging action in …

…the space between the last row and the border (T1228650) (#27687)

e2e/testcafe-devextreme/tests/treeList/rowDragging.ts

@@ -0,0 +1,61 @@
+import TreeList from 'devextreme-testcafe-models/treeList';
+import ExpandableCell from 'devextreme-testcafe-models/treeList/expandableCell';
+
+import { createWidget } from '../../helpers/createWidget';
+import url from '../../helpers/getPageUrl';
+
+fixture`Row dragging`
+ .page(url(__dirname, '../container.html'));
+
+const tasksT1228650 = [{
+ Task_ID: 1,
+ Task_Subject: 'Plans 2015',
+ Task_Parent_ID: 0,
+}, {
+ Task_ID: 2,
+ Task_Subject: 'Health Insurance',
+ Task_Parent_ID: 1,
+}, {
+ Task_ID: 3,
+ Task_Subject: 'Training',
+ Task_Parent_ID: 2,
+}];
+
+test('TreeList - Expand/collapse mechanism breaks after dragging action in the space between the last row and the border (T1228650)', async (t) => {
+ const treeList = new TreeList('#container');
+ const dataRow = treeList.getDataRow(0);
+ const expandButton = (dataRow.getDataCell(0) as ExpandableCell).getExpandButton();
+ const freeSpaceRow = treeList.getFreeSpaceRow();
+ await t
+ .dragToElement(freeSpaceRow, dataRow.element)
+ .click(expandButton)
+ .expect(treeList.getDataRow(1).element.exists)
+ .ok();
+}).before(async () => {
+ await createWidget('dxTreeList', {
+ dataSource: tasksT1228650,
+ keyExpr: 'Task_ID',
+ parentIdExpr: 'Task_Parent_ID',
+ height: 200,
+ wordWrapEnabled: true,
+ showBorders: true,
+ columns: [
+ {
+ dataField: 'test',
+ dataType: 'boolean',
+ },
+ {
+ dataField: 'Task_Subject',
+ fixed: true,
+ fixedPosition: 'right',
+ },
+ ],
+ showColumnLines: true,
+ rowDragging: {
+ allowDropInsideItem: true,
+ allowReordering: false,
+ showDragIcons: false,
+ group: 'none',
+ },
+ });
+});

packages/devextreme/js/__internal/grids/grid_core/row_dragging/m_row_dragging.ts

@@ -115,8 +115,10 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewRowDraggingExtend
 
  rowDragging.onDragStart?.(e);
  },
- onDragEnter: () => {
- togglePointerEventsStyle(true);
+ onDragEnter: (e) => {
+ if (e.fromComponent !== e.toComponent) {
+ togglePointerEventsStyle(true);
+ }
  },
  onDragLeave: () => {
  togglePointerEventsStyle(false);

packages/testcafe-models/dataGrid/index.ts

@@ -47,6 +47,7 @@ export const CLASS = {
  headerRow: 'dx-header-row',
  footerRow: 'dx-footer-row',
  groupFooterRow: 'group-footer',
+ freeSpaceRow: 'dx-freespace-row',
 
  overlayContent: 'dx-overlay-content',
  overlayWrapper: 'dx-overlay-wrapper',
@@ -244,6 +245,10 @@ export default class DataGrid extends Widget {
  return this.element.find(`.${CLASS.dataGrid}-${CLASS.groupFooterRow}`);
  }
 
+ getFreeSpaceRow(): Selector {
+ return this.element.find(`.${CLASS.freeSpaceRow}`);
+ }
+
  getColumnChooser(): ColumnChooser {
  return new ColumnChooser(this.body.find(`.${this.addWidgetPrefix(CLASS.columnChooser)}`));
  }

packages/testcafe-models/treeList/expandableCell.ts

@@ -0,0 +1,15 @@
+import DataCell from "../dataGrid/data/cell";
+
+const CLASS = {
+ expandButton: 'dx-treelist-icon-container',
+};
+
+export default class ExpandableCell extends DataCell {
+ constructor(dataRow: Selector, index: number, widgetName: string) {
+ super(dataRow, index, widgetName);
+ }
+
+ getExpandButton(): Selector {
+ return this.element.find(`.${CLASS.expandButton}`);
+ }
+}

packages/testcafe-models/treeList.ts → packages/testcafe-models/treeList/index.ts

@@ -1,5 +1,5 @@
-import type { WidgetName } from './types';
-import DataGrid from './dataGrid';
+import type { WidgetName } from '../types';
+import DataGrid from '../dataGrid';
 
 export default class TreeList extends DataGrid {
  // eslint-disable-next-line class-methods-use-this