DataGrid(T1267471): ColumnChooser doesn't immediately reflect the changes made to column options (DevExpress#30851)

Author: wdevfx

e2e/testcafe-devextreme/tests/dataGrid/common/columnChooser.ts

@@ -192,3 +192,48 @@ test('Check the behavior of pressing the Esc button when dragging a column from
     mode: 'dragAndDrop',
   },
 }));
+
+test(
+  'Should take into account column options change during general option change (T1267471)',
+  async (t) => {
+    const dataGrid = new DataGrid('#container');
+    const columnChooserBtn = dataGrid.getColumnChooserButton();
+
+    await t.click(columnChooserBtn);
+
+    const columnChooser = dataGrid.getColumnChooser();
+    const lastItemCheckbox = columnChooser.getCheckbox(1);
+
+    await t.expect(columnChooser.isCheckboxDisabled(0)).notOk();
+    await t.expect(columnChooser.isCheckboxDisabled(1)).notOk();
+
+    await t.click(lastItemCheckbox);
+
+    await t.expect(columnChooser.isCheckboxDisabled(0)).ok();
+    await t.expect(columnChooser.isCheckboxDisabled(1)).notOk();
+  },
+).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { id: 0, A: 'A', B: 'B' },
+  ],
+  keyExpr: 'id',
+  columns: ['A', 'B'],
+  columnChooser: {
+    enabled: true,
+    mode: 'select',
+  },
+  onOptionChanged: ({ component, fullName }) => {
+    if (!/columns\[\d+\]\.visible/.test(fullName)) {
+      return;
+    }
+
+    const visibleColumns = component.getVisibleColumns();
+    const [{ dataField: lastColumnDataField }] = visibleColumns;
+
+    if (!lastColumnDataField) {
+      return;
+    }
+
+    component.columnOption(lastColumnDataField, 'allowHiding', false);
+  },
+}));

packages/devextreme/js/__internal/grids/grid_core/column_chooser/m_column_chooser.ts

@@ -376,25 +376,45 @@ export class ColumnChooserView extends ColumnsView {
     this._columnChooserList.endUpdate();
   }
 
-  protected _columnOptionChanged(e) {
-    super._columnOptionChanged(e);
+  protected _columnOptionChanged(changes): void {
+    super._columnOptionChanged(changes);
 
+    const { optionNames } = changes;
     const isSelectMode = this.isSelectMode();
+    const onlyVisibleChanged = this.isColumnVisibilityOnlyUpdated(optionNames);
+    const isOnlyColumnVisibilityUpdated = this._isUpdatingColumnVisibility
+      && onlyVisibleChanged;
 
-    if (isSelectMode && this._columnChooserList && !this._isUpdatingColumnVisibility) {
-      const { optionNames } = e;
-      const onlyVisibleChanged = optionNames.visible && optionNames.length === 1;
-      const columnIndices = isDefined(e.columnIndex) ? [e.columnIndex] : e.columnIndices;
-      const needUpdate = COLUMN_OPTIONS_USED_IN_ITEMS.some((optionName) => optionNames[optionName]) || (e.changeTypes.columns && optionNames.all);
+    if (!isSelectMode || !this._columnChooserList || isOnlyColumnVisibilityUpdated) {
+      return;
+    }
 
-      if (needUpdate) {
-        this._updateItemsSelection(columnIndices);
+    const columnIndices = isDefined(changes.columnIndex)
+      ? [changes.columnIndex]
+      : changes.columnIndices;
+    const hasItemsOptionNames = COLUMN_OPTIONS_USED_IN_ITEMS
+      .some((optionName) => optionNames[optionName]);
+    const needUpdate: boolean = hasItemsOptionNames
+      || (changes.changeTypes.columns && optionNames.all);
 
-        if (!onlyVisibleChanged) {
-          this._updateItems();
-        }
-      }
+    if (!needUpdate) {
+      return;
     }
+
+    this._updateItemsSelection(columnIndices);
+    if (!onlyVisibleChanged) {
+      this._updateItems();
+    }
+  }
+
+  private isColumnVisibilityOnlyUpdated(
+    optionNames: { length: number } & Record<string, unknown>,
+  ): boolean {
+    const optionKeys = Object
+      .keys(optionNames ?? {})
+      .filter((key) => key !== 'length');
+
+    return optionKeys.length === 1 && optionKeys[0] === 'visible';
   }
 
   public getColumnElements() {

packages/testcafe-models/dataGrid/columnChooser.ts

@@ -7,6 +7,7 @@ const CLASS = {
   overlayWrapper: 'dx-overlay-wrapper',
   columnChooser: 'dx-datagrid-column-chooser',
   checkboxChecked: 'dx-checkbox-checked',
+  checkboxDisabled: 'dx-state-disabled',
   checkbox: 'dx-checkbox',
   treeViewItem: 'dx-treeview-item',
   treeView: 'dx-treeview',
@@ -49,6 +50,10 @@ export default class ColumnChooser extends FocusableElement {
     return this.getCheckbox(nth).hasClass(CLASS.checkboxChecked);
   }
 
+  isCheckboxDisabled(nth = 0): Promise<boolean> {
+    return this.getCheckbox(nth).hasClass(CLASS.checkboxDisabled);
+  }
+
   getColumnsCount(): Promise<number> {
     return this.content.find(`.${CLASS.treeViewItem}`).count;
   }