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

Author: wdevfx

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

@@ -184,3 +184,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

@@ -403,25 +403,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

@@ -6,6 +6,9 @@ const CLASS = {
   overlayContent: 'dx-overlay-content',
   overlayWrapper: 'dx-overlay-wrapper',
   columnChooser: 'dx-datagrid-column-chooser',
+  checkboxChecked: 'dx-checkbox-checked',
+  checkboxDisabled: 'dx-state-disabled',
+  checkbox: 'dx-checkbox',
   checkboxIcon: 'dx-checkbox-icon',
   treeViewItem: 'dx-treeview-item',
   treeView: 'dx-treeview',
@@ -44,6 +47,22 @@ export default class ColumnChooser extends FocusableElement {
     return this.content.find(`.${CLASS.checkboxIcon}`).nth(nth);
   }
 
+  getCheckbox(nth = 0): Selector {
+    return this.content.find(`.${CLASS.checkbox}`).nth(nth);
+  }
+
+  isCheckboxChecked(nth = 0): Promise<boolean> {
+    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;
+  }
+
   getColumn(index = 0): Selector {
     return this.content.find(`.${CLASS.treeViewItem}`).nth(index);
   }