T1325067 — PivotGrid: Field Chooser — The "Cannot read properties of undefined (reading 'isMeasure')" error occurs when dragging fields while data is loading (#33103)

Author: aleksei-semikozov

packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/m_field_chooser_base.ts

@@ -23,7 +23,7 @@ import { createPath, foreachTree } from '../m_widget_utils';
 import SortableModule from '../sortable/m_sortable';
 import { ATTRIBUTES, CLASSES } from './const';
 import { dragAndDropItemRender } from './dom';
-import { reverseSortOrder } from './utils';
+import { reverseSortOrder, shouldCancelDragging } from './utils';
 
 const { Sortable } = SortableModule;
 
@@ -253,15 +253,7 @@ export class FieldChooserBase extends mixinWidget {
       onDragging(e) {
         const field = e.sourceElement.data('field');
         const { targetGroup } = e;
-        e.cancel = false;
-
-        if (field.isMeasure === true) {
-          if (targetGroup === 'column' || targetGroup === 'row' || targetGroup === 'filter') {
-            e.cancel = true;
-          }
-        } else if (field.isMeasure === false && targetGroup === 'data') {
-          e.cancel = true;
-        }
+        e.cancel = shouldCancelDragging(field, targetGroup);
       },
       useIndicator: true,
       onChanged(e) {

packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/utils.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from '@jest/globals';
+
+import { shouldCancelDragging } from './utils';
+
+describe('shouldCancelDragging', () => {
+  it('should return false when field is undefined', () => {
+    expect(shouldCancelDragging(undefined, 'column')).toBe(false);
+    expect(shouldCancelDragging(undefined, 'row')).toBe(false);
+    expect(shouldCancelDragging(undefined, 'filter')).toBe(false);
+    expect(shouldCancelDragging(undefined, 'data')).toBe(false);
+  });
+
+  it('should return true when isMeasure is true and target is column', () => {
+    expect(shouldCancelDragging({ isMeasure: true }, 'column')).toBe(true);
+  });
+
+  it('should return true when isMeasure is true and target is row', () => {
+    expect(shouldCancelDragging({ isMeasure: true }, 'row')).toBe(true);
+  });
+
+  it('should return true when isMeasure is true and target is filter', () => {
+    expect(shouldCancelDragging({ isMeasure: true }, 'filter')).toBe(true);
+  });
+
+  it('should return false when isMeasure is true and target is data', () => {
+    expect(shouldCancelDragging({ isMeasure: true }, 'data')).toBe(false);
+  });
+
+  it('should return true when isMeasure is false and target is data', () => {
+    expect(shouldCancelDragging({ isMeasure: false }, 'data')).toBe(true);
+  });
+
+  it('should return false when isMeasure is false and target is column', () => {
+    expect(shouldCancelDragging({ isMeasure: false }, 'column')).toBe(false);
+  });
+
+  it('should return false when isMeasure is undefined', () => {
+    expect(shouldCancelDragging({}, 'data')).toBe(false);
+    expect(shouldCancelDragging({}, 'column')).toBe(false);
+  });
+});

packages/devextreme/js/__internal/grids/pivot_grid/field_chooser/utils.ts

@@ -6,3 +6,22 @@ export const reverseSortOrder = (
 ): SortOrderType => (sortOrder === SORT_ORDER.descending
   ? SORT_ORDER.ascending
   : SORT_ORDER.descending);
+
+export const shouldCancelDragging = (
+  field: { isMeasure?: boolean } | undefined,
+  targetGroup: string,
+): boolean => {
+  if (!field) {
+    return false;
+  }
+
+  if (field.isMeasure === true) {
+    return targetGroup === 'column' || targetGroup === 'row' || targetGroup === 'filter';
+  }
+
+  if (field.isMeasure === false && targetGroup === 'data') {
+    return true;
+  }
+
+  return false;
+};