PivotGrid: restore Field Panel operations after dataSource reassignment

packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts

@@ -4,11 +4,13 @@ import { addNamespace } from '@js/common/core/events/utils/index';
 import localizationMessage from '@js/common/core/localization/message';
 import registerComponent from '@js/core/component_registrator';
 import { getPublicElement } from '@js/core/element';
+import { data as elementData, removeData } from '@js/core/element_data';
 import $ from '@js/core/renderer';
 import { deferRender, deferUpdate, noop } from '@js/core/utils/common';
 import { Deferred, when } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
+import { name as publicComponentName } from '@js/core/utils/public_component';
 import {
   getHeight, getOuterHeight,
   getWidth, setHeight,
@@ -394,6 +396,31 @@ class PivotGrid extends Widget {
     this._actions[eventName](eventArg);
   }
 
+  _disposeFieldChooserBase() {
+    const that = this;
+    const fieldChooserBase = that._fieldChooserBase;
+
+    if (!fieldChooserBase) {
+      return;
+    }
+
+    fieldChooserBase._dispose();
+
+    const element = that.$element().get(0);
+    const componentName = publicComponentName(FieldChooserBase);
+    const componentNames = elementData(element, 'dxComponents');
+
+    if (Array.isArray(componentNames)) {
+      const componentNameIndex = componentNames.lastIndexOf(componentName);
+      if (componentNameIndex > -1) {
+        componentNames.splice(componentNameIndex, 1);
+      }
+    }
+    removeData(element, componentName);
+
+    that._fieldChooserBase = undefined;
+  }
+
   _optionChanged(args) {
     const that = this;
 
@@ -410,9 +437,7 @@ class PivotGrid extends Widget {
       case 'allowSortingBySummary':
       case 'scrolling':
       case 'stateStoring':
-        if (that._fieldChooserBase) {
-          that._fieldChooserBase._dispose();
-        }
+        that._disposeFieldChooserBase();
         that._initDataController();
         that.getFieldChooserPopup().hide();
         that._renderFieldChooser();
@@ -1272,9 +1297,7 @@ class PivotGrid extends Widget {
     const that = this;
     clearTimeout(that._hideLoadingTimeoutID);
 
-    if (that._fieldChooserBase) {
-      that._fieldChooserBase._dispose();
-    }
+    that._disposeFieldChooserBase();
 
     if (that._dataController) {
       that._dataController.dispose();

packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js

@@ -1061,6 +1061,45 @@ QUnit.module('dxPivotGrid', {
         assert.ok(disposeSpy.calledOnce, '_dispose was called once on dataSource change');
     });
 
+    QUnit.test('Field panel operations should work after dataSource reassignment', function(assert) {
+        const pivotGrid = createPivotGrid({
+            allowSorting: true,
+            allowFiltering: true,
+            fieldPanel: {
+                visible: true
+            },
+            dataSource: null
+        });
+
+        pivotGrid.option('dataSource', new PivotGridDataSource({
+            fields: [
+                { dataField: 'region', area: 'row' },
+                { dataField: 'date', dataType: 'date', area: 'column' },
+                { dataField: 'sales', dataType: 'number', summaryType: 'sum', area: 'data' }
+            ],
+            store: [
+                { region: 'North America', date: '2013/01/06', sales: 1740 },
+                { region: 'South America', date: '2013/01/13', sales: 850 }
+            ]
+        }));
+        this.clock.tick(500);
+
+        const $pivotGrid = $('#pivotGrid');
+        const groupFilter = $pivotGrid.dxSortableOld('option', 'groupFilter');
+
+        assert.strictEqual(groupFilter.call($pivotGrid.find('.dx-area-fields').get(0)), true, 'field panel group is available for drag&drop');
+
+        $pivotGrid.find('.dx-area-description-cell .dx-area-field').first().trigger('dxclick');
+        this.clock.tick(500);
+
+        assert.equal(pivotGrid.getDataSource().state().fields[0].sortOrder, 'desc', 'sorting changes current dataSource state');
+
+        $pivotGrid.find('.dx-header-filter').first().trigger('dxclick');
+        this.clock.tick(500);
+
+        assert.ok($('.dx-header-filter-menu').find('.dx-list-item').length > 0, 'header filter has items');
+    });
+
     QUnit.test('not show field chooser popup on description area click when fieldChooser disabled', function(assert) {
         createPivotGrid({
             fieldChooser: {
@@ -7677,4 +7716,3 @@ QUnit.module('Data area', () => {
         });
     });
 });
-