CardView/DataGrid - Selection: Clear selection does not work when change the showCheckBoxesMode option at runtime (#31410)

Author: pomahtri

e2e/testcafe-devextreme/tests/cardView/selection/functional.ts

@@ -968,3 +968,32 @@ test('Switching the showCheckBoxesMode option from always to onClick at runtime
     showCheckBoxesMode: 'always',
   },
 }));
+
+test('"Deselect all" should work after changing showCheckboxMode', async (t) => {
+  const cardView = new CardView('#container');
+
+  await cardView.option('selection.showCheckBoxesMode', 'onClick');
+
+  await t.click(
+    cardView.getToolbar().getClearSelectionButton(),
+  );
+
+  await t
+    .expect(cardView.getToolbar().isClearSelectionButtonDisabled())
+    .ok();
+
+  for (let i = 0; i < 6; i += 1) {
+    await t
+      .expect(cardView.getCard(i).isSelected)
+      .notOk();
+  }
+}).before(async () => createWidget('dxCardView', {
+  dataSource: [
+    { a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }, { a: 6 },
+  ],
+  keyExpr: 'a',
+  selection: {
+    mode: 'multiple',
+  },
+  selectedCardKeys: [1, 2],
+}));

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

@@ -294,3 +294,36 @@ test('"Select All" checkbox should not react when not visible', async (t) => {
     width: 90,
   }],
 }));
+
+test('"Deselect all" should work after changing showCheckboxMode', async (t) => {
+  const dataGrid = new DataGrid('#container');
+
+  await dataGrid.option('selection.showCheckBoxesMode', 'onClick');
+
+  const selectAllCheckBox = new CheckBox(
+    dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(0).getEditor().element,
+  );
+
+  await t.click(selectAllCheckBox.element); // select all
+  await t.click(selectAllCheckBox.element); // deselect all
+
+  await t
+    .expect(selectAllCheckBox.option('value'))
+    .eql(false);
+
+  for (let i = 0; i < 7; i += 1) {
+    await t
+      .expect(dataGrid.getDataRow(i).isSelected)
+      .notOk();
+  }
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }, { a: 5 }, { a: 6 }, { a: 7 },
+  ],
+  keyExpr: 'a',
+  selection: {
+    mode: 'multiple',
+    showCheckBoxesMode: 'always',
+  },
+  selectedRowKeys: [1, 2],
+}));

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

@@ -440,6 +440,10 @@ export class SelectionController extends modules.Controller {
           this.selectRows(selectedRowKeys).always(() => {
             this._fireSelectionChanged();
           });
+        } else {
+          this.refresh().always(() => {
+            this._fireSelectionChanged();
+          });
         }
 
         this._columnsController.updateColumns();

packages/devextreme/js/__internal/grids/new/grid_core/selection/controller.ts

@@ -149,6 +149,14 @@ export class SelectionController {
     });
 
     effect(() => {
+      /*
+      TODO: subscription to selectionHelper to update keys if it is reinitialized.
+      Need to get rid of `selectionHelper.peek()` inside of selectCards()
+      and pass selectionHelper from here
+      */
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+      this.selectionHelper.value;
+
       const isLoaded = this.dataController.isLoaded.value;
       if (isLoaded) {
         const selectedCardKeys = this.selectedCardKeys.peek();