diff --git a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts index a8551242092a..e222956f6dc2 100644 --- a/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts +++ b/packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts @@ -1174,7 +1174,7 @@ class PivotGrid extends Widget { that.$element().addClass(OVERFLOW_HIDDEN_CLASS); - that._createComponent(that.$element(), FieldChooserBase, { + const fieldChooserOptions = { dataSource: that.getDataSource(), encodeHtml: that.option('encodeHtml'), allowFieldDragging: that.option('fieldPanel.allowFieldDragging'), @@ -1182,7 +1182,14 @@ class PivotGrid extends Widget { visible: that.option('visible'), // @ts-expect-error ts-error remoteSort: that.option('scrolling.mode') === 'virtual', - }); + }; + + if (isFirstDrawing) { + that._createComponent(that.$element(), FieldChooserBase, fieldChooserOptions); + } else { + // @ts-expect-error dxPivotGridFieldChooserBase is registered as jQuery plugin + that.$element().dxPivotGridFieldChooserBase('instance').option(fieldChooserOptions); + } const dataArea = that._renderDataArea(dataAreaElement); const rowsArea = that._renderRowsArea(rowsAreaElement); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js index 47575050dd08..f036c89e9d62 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.pivotGrid/pivotGrid.tests.js @@ -1044,6 +1044,43 @@ QUnit.module('dxPivotGrid', { }); + QUnit.test('Reassigning dataSource keeps only one current PivotGridDataSource instance (no stale references)', function(assert) { + const baseOptions = { + store: { type: 'array', data: [] }, + fields: [ + { area: 'row', dataField: 'region' }, + { area: 'column', dataField: 'date' }, + { area: 'data', dataField: 'amount', summaryType: 'sum' } + ] + }; + + const dataSource1 = new PivotGridDataSource(baseOptions); + const dataSource2 = new PivotGridDataSource(baseOptions); + const dataSource3 = new PivotGridDataSource(baseOptions); + + const pivotGrid = createPivotGrid({ dataSource: dataSource1 }); + this.clock.tick(10); + + assert.strictEqual(pivotGrid.getDataSource(), dataSource1, 'initial dataSource is dataSource1'); + assert.strictEqual(pivotGrid.$element().dxPivotGridFieldChooserBase('instance').option('dataSource'), dataSource1, 'FieldChooserBase uses dataSource1'); + + const initialOptionChangedListLength = pivotGrid._eventsStrategy._events.optionChanged._list.length; + + pivotGrid.option('dataSource', dataSource2); + this.clock.tick(10); + + assert.strictEqual(pivotGrid.getDataSource(), dataSource2, 'current dataSource is dataSource2 after first reassignment'); + assert.strictEqual(pivotGrid.$element().dxPivotGridFieldChooserBase('instance').option('dataSource'), dataSource2, 'FieldChooserBase uses dataSource2'); + assert.strictEqual(pivotGrid._eventsStrategy._events.optionChanged._list.length, initialOptionChangedListLength, 'optionChanged listener count does not grow after first reassignment'); + + pivotGrid.option('dataSource', dataSource3); + this.clock.tick(10); + + assert.strictEqual(pivotGrid.getDataSource(), dataSource3, 'current dataSource is dataSource3 after second reassignment'); + assert.strictEqual(pivotGrid.$element().dxPivotGridFieldChooserBase('instance').option('dataSource'), dataSource3, 'FieldChooserBase uses current dataSource (no stale reference to dataSource1 or dataSource2)'); + assert.strictEqual(pivotGrid._eventsStrategy._events.optionChanged._list.length, initialOptionChangedListLength, 'optionChanged listener count does not grow after multiple reassignments'); + }); + QUnit.test('not show field chooser popup on description area click when fieldChooser disabled', function(assert) { createPivotGrid({ fieldChooser: {