From 5a3b0a1b46ca24c6dcc044955b0eeb50ecfee251 Mon Sep 17 00:00:00 2001
From: Vaadin Bot <vaadin-bot@users.noreply.github.com>
Date: Mon, 14 Oct 2024 09:16:07 +0200
Subject: [PATCH] fix: clear client-side selection when changing selection mode
 (#6720) (#6722)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: clear client-side selection when changing selection mode

* replace IT with connector test

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
---
 ...id-connector-change-selection-mode.test.ts | 75 +++++++++++++++++++
 .../resources/frontend/gridConnector.ts       |  1 +
 2 files changed, 76 insertions(+)
 create mode 100644 vaadin-grid-flow-parent/vaadin-grid-flow-integration-tests/test/grid-connector-change-selection-mode.test.ts

diff --git a/vaadin-grid-flow-parent/vaadin-grid-flow-integration-tests/test/grid-connector-change-selection-mode.test.ts b/vaadin-grid-flow-parent/vaadin-grid-flow-integration-tests/test/grid-connector-change-selection-mode.test.ts
new file mode 100644
index 00000000000..438cbaeec34
--- /dev/null
+++ b/vaadin-grid-flow-parent/vaadin-grid-flow-integration-tests/test/grid-connector-change-selection-mode.test.ts
@@ -0,0 +1,75 @@
+import { expect, fixtureSync, nextFrame } from '@open-wc/testing';
+import { init, getBodyCellContent, setRootItems, initSelectionColumn } from './shared.js';
+import type { FlowGrid } from './shared.js';
+
+describe('grid connector - change selection mode', () => {
+  let grid: FlowGrid;
+
+  function clickSelectCheckbox(row: number) {
+    getBodyCellContent(grid, row, 0)!.querySelector('vaadin-checkbox')!.click();
+  }
+
+  beforeEach(async () => {
+    grid = fixtureSync(`
+      <vaadin-grid>
+        <vaadin-grid-flow-selection-column></vaadin-grid-flow-selection-column>
+        <vaadin-grid-column path="name"></vaadin-grid-column>
+      </vaadin-grid>
+    `);
+
+    init(grid);
+
+    const selectionColumn = grid.querySelector('vaadin-grid-flow-selection-column')!;
+    initSelectionColumn(grid, selectionColumn);
+
+    setRootItems(grid.$connector, [
+      { key: '0', name: 'foo' },
+      { key: '1', name: 'bar' }
+    ]);
+    await nextFrame();
+  });
+
+  describe('clear selection', () => {
+    it('should clear selection when changing from single to none', () => {
+      grid.$connector.setSelectionMode('SINGLE');
+      getBodyCellContent(grid, 0, 0)!.click();
+      expect(grid.selectedItems.length).to.equal(1);
+
+      grid.$connector.setSelectionMode('NONE');
+
+      expect(grid.selectedItems).to.be.empty;
+    });
+
+    it('should clear selection when changing from single to multi ', () => {
+      grid.$connector.setSelectionMode('SINGLE');
+      getBodyCellContent(grid, 0, 0)!.click();
+      expect(grid.selectedItems.length).to.equal(1);
+
+      grid.$connector.setSelectionMode('MULTI');
+
+      expect(grid.selectedItems).to.be.empty;
+    });
+
+    it('should clear selection when changing from multi to none', () => {
+      grid.$connector.setSelectionMode('MULTI');
+      clickSelectCheckbox(0);
+      clickSelectCheckbox(1);
+      expect(grid.selectedItems.length).to.equal(2);
+
+      grid.$connector.setSelectionMode('NONE');
+
+      expect(grid.selectedItems).to.be.empty;
+    });
+
+    it('should clear selection when changing from multi to single', () => {
+      grid.$connector.setSelectionMode('MULTI');
+      clickSelectCheckbox(0);
+      clickSelectCheckbox(1);
+      expect(grid.selectedItems.length).to.equal(2);
+
+      grid.$connector.setSelectionMode('SINGLE');
+
+      expect(grid.selectedItems).to.be.empty;
+    });
+  });
+});
diff --git a/vaadin-grid-flow-parent/vaadin-grid-flow/src/main/resources/META-INF/resources/frontend/gridConnector.ts b/vaadin-grid-flow-parent/vaadin-grid-flow/src/main/resources/META-INF/resources/frontend/gridConnector.ts
index e476c211e7c..101b4469336 100644
--- a/vaadin-grid-flow-parent/vaadin-grid-flow/src/main/resources/META-INF/resources/frontend/gridConnector.ts
+++ b/vaadin-grid-flow-parent/vaadin-grid-flow/src/main/resources/META-INF/resources/frontend/gridConnector.ts
@@ -901,6 +901,7 @@ import { GridFlowSelectionColumn } from "./vaadin-grid-flow-selection-column.js"
           if ((typeof mode === 'string' || mode instanceof String) && validSelectionModes.indexOf(mode) >= 0) {
             selectionMode = mode;
             selectedKeys = {};
+            grid.selectedItems = [];
             grid.$connector.updateMultiSelectable();
           } else {
             throw 'Attempted to set an invalid selection mode';