DataGrid (cherry-pick) - fixed "Select All" checkbox behavior when nothing to select (T1299125) (DevExpress#30731)

Signed-off-by: Dmitry Lavrinovich <[email protected]>

Author: dmlvr

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

@@ -19,7 +19,6 @@ test('selectAll state should be correct after unselect item if refresh(true) is
 
   // act
   await t.click(firstRowSelectionCheckBox.element);
-
   // assert
   await t
     .expect(await selectAllCheckBox.option('value')).eql(undefined)
@@ -248,3 +247,50 @@ test('Sensitivity option change should be correctly handled during runtime chang
 }));
 
 // ---
+
+test('"Select All" checkbox should not react when not visible', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  const selectAllCheckBox = new CheckBox(
+    dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).getEditor().element,
+  );
+  const editorCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).element;
+
+  await t.expect(await selectAllCheckBox.option('visible')).notOk();
+
+  await t.click(editorCell);
+
+  await t.expect(await selectAllCheckBox.option('visible')).notOk();
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [],
+  keyExpr: 'orderId',
+  selection: {
+    mode: 'multiple',
+  },
+  paging: {
+    pageSize: 10,
+  },
+  pager: {
+    visible: true,
+  },
+  filterRow: {
+    visible: true,
+  },
+  columns: [{
+    dataField: 'orderId',
+    caption: 'Order ID',
+    width: 90,
+  },
+  'city', {
+    dataField: 'country',
+    width: 180,
+  },
+  'region', {
+    dataField: 'date',
+    dataType: 'date',
+  }, {
+    dataField: 'amount',
+    format: 'currency',
+    width: 90,
+  }],
+}));

packages/devextreme/js/__internal/grids/grid_core/selection/m_selection.ts

@@ -718,15 +718,22 @@ export const columnHeadersSelectionExtenderMixin = (Base: ModuleType<ColumnHeade
     this._selectionController.selectionChanged.add(this._updateSelectAllValue.bind(this));
   }
 
+  private _isSelectAllCheckBoxVisible() {
+    const isEmptyData = this._dataController.isEmpty();
+    const allowSelectAll = this.option('selection.allowSelectAll');
+    const isSelectAll = this._selectionController.isSelectAll();
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    return !isEmptyData && (allowSelectAll || isSelectAll !== false);
+  }
+
   private _updateSelectAllValue() {
     const that = this;
     const $element = that.element();
     const $editor = $element && $element.find(`.${SELECT_CHECKBOX_CLASS}`);
 
-    if ($element && $editor.length && that.option('selection.mode') === 'multiple') {
-      const selectAllValue = that._selectionController.isSelectAll();
-      const hasSelection = selectAllValue !== false;
-      const isVisible = that.option('selection.allowSelectAll') ? !that._dataController.isEmpty() : hasSelection;
+    if ($element && $editor.length && this.option('selection.mode') === 'multiple') {
+      const selectAllValue = this._selectionController.isSelectAll();
+      const isVisible = this._isSelectAllCheckBoxVisible();
 
       $editor.dxCheckBox('instance').option({
         visible: isVisible,
@@ -758,8 +765,6 @@ export const columnHeadersSelectionExtenderMixin = (Base: ModuleType<ColumnHeade
   protected _createSelectAllCheckboxElement(
     column?: Column,
   ): dxElementWrapper {
-    const isEmptyData = this._dataController.isEmpty();
-
     const $groupElement = $('<div>')
       .addClass(SELECT_CHECKBOX_CLASS);
 
@@ -770,8 +775,7 @@ export const columnHeadersSelectionExtenderMixin = (Base: ModuleType<ColumnHeade
       dataType: 'boolean',
       value: this._selectionController.isSelectAll(),
       editorOptions: {
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        visible: !isEmptyData && (this.option('selection.allowSelectAll') || this._selectionController.isSelectAll() !== false),
+        visible: this._isSelectAllCheckBoxVisible(),
       },
       // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
       tabIndex: this.option('useLegacyKeyboardNavigation') ? -1 : this.option('tabIndex') || 0,
@@ -801,6 +805,11 @@ export const columnHeadersSelectionExtenderMixin = (Base: ModuleType<ColumnHeade
     eventsEngine.on($element, clickEventName, this.createAction((e) => {
       const { event } = e;
 
+      if (!this._isSelectAllCheckBoxVisible()) {
+        event.preventDefault();
+        return;
+      }
+
       if (!$(event.target).closest(`.${SELECT_CHECKBOX_CLASS}`).length) {
         // @ts-expect-error
         eventsEngine.trigger($(event.currentTarget).children(`.${SELECT_CHECKBOX_CLASS}`), clickEventName);