T1325377 - PivotGrid: Field Panel - fix multiple operations (#33148)

Author: sjbur

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

@@ -402,9 +402,6 @@ class PivotGrid extends Widget {
       case 'allowSortingBySummary':
       case 'scrolling':
       case 'stateStoring':
-        if (that._fieldChooserBase) {
-          that._fieldChooserBase._dispose();
-        }
         that._initDataController();
         that.getFieldChooserPopup().hide();
         that._renderFieldChooser();
@@ -1171,15 +1168,25 @@ class PivotGrid extends Widget {
 
     that.$element().addClass(OVERFLOW_HIDDEN_CLASS);
 
-    that._fieldChooserBase = that._createComponent(that.$element(), FieldChooserBase, {
+    const fieldChooserBaseConfig = {
       dataSource: that.getDataSource(),
       encodeHtml: that.option('encodeHtml'),
       allowFieldDragging: that.option('fieldPanel.allowFieldDragging'),
       headerFilter: that.option('headerFilter'),
       visible: that.option('visible'),
       // @ts-expect-error ts-error
       remoteSort: that.option('scrolling.mode') === 'virtual',
-    });
+    };
+
+    if (that._fieldChooserBase) {
+      that._fieldChooserBase.option(fieldChooserBaseConfig);
+    } else {
+      that._fieldChooserBase = that._createComponent(
+        that.$element(),
+        FieldChooserBase,
+        fieldChooserBaseConfig,
+      );
+    }
 
     const dataArea = that._renderDataArea(dataAreaElement);
     const rowsArea = that._renderRowsArea(rowsAreaElement);
@@ -1264,10 +1271,6 @@ class PivotGrid extends Widget {
     const that = this;
     clearTimeout(that._hideLoadingTimeoutID);
 
-    if (that._fieldChooserBase) {
-      that._fieldChooserBase._dispose();
-    }
-
     if (that._dataController) {
       that._dataController.dispose();
     }

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

@@ -908,6 +908,42 @@ QUnit.module('dxPivotGrid', {
         assert.equal($('.dx-header-filter-menu').find('.dx-list-item').text(), 'test <test>', 'encoded');
     });
 
+    QUnit.test('T1325377: Field panel operations should work after dataSource reassignment', function(assert) {
+        const assignedDataSource = 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 }
+            ]
+        });
+
+        const pivotGrid = createPivotGrid({
+            allowSorting: true,
+            allowFiltering: true,
+            fieldPanel: {
+                visible: true
+            },
+            dataSource: null
+        });
+        pivotGrid.option('dataSource', assignedDataSource);
+        this.clock.tick(500);
+
+        const $pivotGrid = $('#pivotGrid');
+
+        $pivotGrid.find('.dx-area-description-cell .dx-area-field').first().trigger('dxclick');
+        this.clock.tick(500);
+
+        $pivotGrid.find('.dx-header-filter').first().trigger('dxclick');
+        this.clock.tick(500);
+
+        assert.equal(pivotGrid.getDataSource().state().fields[0].sortOrder, 'desc', 'sorting changes current dataSource state');
+        assert.ok($('.dx-header-filter-menu').find('.dx-list-item').length > 0, 'header filter has items');
+    });
+
     QUnit.test('Field chooser inherits encodeHtml option', function(assert) {
         const pivotGrid = createPivotGrid({
             dataSource: {
@@ -1044,7 +1080,7 @@ QUnit.module('dxPivotGrid', {
 
     });
 
-    QUnit.test('T1317109: fieldChooser disposes on dataSource change', function(assert) {
+    QUnit.test('T1317109: FieldChooserBase internal _dataSource matches PivotGrid on dataSource change', function(assert) {
         const pivotGrid = createPivotGrid({
             dataSource: {
                 rows: [],
@@ -1053,13 +1089,17 @@ QUnit.module('dxPivotGrid', {
             }
         });
 
-        const disposeSpy = sinon.spy(pivotGrid._fieldChooserBase, '_dispose');
-
         pivotGrid.option('dataSource', this.testOptions.dataSource);
-
         this.clock.tick(500);
 
-        assert.ok(disposeSpy.calledOnce, '_dispose was called once on dataSource change');
+        const fieldChooserBase = $('#pivotGrid').dxPivotGridFieldChooserBase('instance');
+        const pivotDataSource = pivotGrid.getDataSource();
+
+        assert.strictEqual(
+            fieldChooserBase._dataSource,
+            pivotDataSource,
+            'FieldChooserBase._dataSource must equal getDataSource() after dataSource change'
+        );
     });
 
     QUnit.test('not show field chooser popup on description area click when fieldChooser disabled', function(assert) {