Skip to content

Commit ce9c14f

Browse files
vursenvursen
authoredMar 24, 2025
fix: set shiftKey correctly on mousedown + Shift + mouseup (#8852)
1 parent df5becf commit ce9c14f

File tree

2 files changed

+46
-26
lines changed

2 files changed

+46
-26
lines changed
 

‎packages/grid/src/vaadin-grid-selection-column-base-mixin.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -206,11 +206,7 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
206206

207207
/** @private */
208208
__onGridInteraction(e) {
209-
if (e instanceof KeyboardEvent) {
210-
this._shiftKeyDown = e.key !== 'Shift' && e.shiftKey;
211-
} else {
212-
this._shiftKeyDown = e.shiftKey;
213-
}
209+
this._shiftKeyDown = e.shiftKey;
214210

215211
if (this.autoSelect) {
216212
// Prevent text selection when shift-clicking to select a range of items.

‎packages/grid/test/selection.test.js

+45-21
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { expect } from '@vaadin/chai-plugins';
2-
import { resetMouse, sendKeys, sendMouse } from '@vaadin/test-runner-commands';
2+
import { resetMouse, sendKeys, sendMouse, sendMouseToElement } from '@vaadin/test-runner-commands';
33
import { click, fixtureSync, listenOnce, mousedown, nextFrame, nextRender } from '@vaadin/testing-helpers';
44
import sinon from 'sinon';
55
import '../all-imports.js';
@@ -899,14 +899,6 @@ describe('multi selection column', () => {
899899
describe('item-toggle event', () => {
900900
let itemSelectionSpy, rows, checkboxes;
901901

902-
async function mouseClick(element) {
903-
const { x, y, width, height } = element.getBoundingClientRect();
904-
await sendMouse({
905-
type: 'click',
906-
position: [x + width / 2, y + height / 2].map(Math.floor),
907-
});
908-
}
909-
910902
function assertEvent(detail) {
911903
expect(itemSelectionSpy).to.be.calledOnce;
912904
expect(itemSelectionSpy.args[0][0].detail).to.eql(detail);
@@ -935,21 +927,37 @@ describe('multi selection column', () => {
935927
});
936928

937929
it('should fire the event when toggling an item with click', async () => {
938-
await mouseClick(checkboxes[0]);
930+
await sendMouseToElement({ type: 'click', element: checkboxes[0] });
939931
assertEvent({ item: grid.items[0], selected: true, shiftKey: false });
940932

941-
await mouseClick(checkboxes[0]);
933+
await sendMouseToElement({ type: 'click', element: checkboxes[0] });
942934
assertEvent({ item: grid.items[0], selected: false, shiftKey: false });
943935
});
944936

945937
it('should fire the event when toggling an item with Shift + click', async () => {
946938
await sendKeys({ down: 'Shift' });
947-
await mouseClick(checkboxes[0]);
939+
await sendMouseToElement({ type: 'click', element: checkboxes[0] });
948940
await sendKeys({ up: 'Shift' });
949941
assertEvent({ item: grid.items[0], selected: true, shiftKey: true });
950942

951943
await sendKeys({ down: 'Shift' });
952-
await mouseClick(checkboxes[0]);
944+
await sendMouseToElement({ type: 'click', element: checkboxes[0] });
945+
await sendKeys({ up: 'Shift' });
946+
assertEvent({ item: grid.items[0], selected: false, shiftKey: true });
947+
});
948+
949+
it('should fire the event when toggling an item with mousedown + Shift + mouseup', async () => {
950+
await sendMouseToElement({ type: 'move', element: checkboxes[0] });
951+
952+
await sendMouse({ type: 'down' });
953+
await sendKeys({ down: 'Shift' });
954+
await sendMouse({ type: 'up' });
955+
await sendKeys({ up: 'Shift' });
956+
assertEvent({ item: grid.items[0], selected: true, shiftKey: true });
957+
958+
await sendMouse({ type: 'down' });
959+
await sendKeys({ down: 'Shift' });
960+
await sendMouse({ type: 'up' });
953961
await sendKeys({ up: 'Shift' });
954962
assertEvent({ item: grid.items[0], selected: false, shiftKey: true });
955963
});
@@ -981,21 +989,37 @@ describe('multi selection column', () => {
981989
});
982990

983991
it('should fire the event when toggling an item with click', async () => {
984-
await mouseClick(rows[0]);
992+
await sendMouseToElement({ type: 'click', element: rows[0] });
985993
assertEvent({ item: grid.items[0], selected: true, shiftKey: false });
986994

987-
await mouseClick(rows[0]);
995+
await sendMouseToElement({ type: 'click', element: rows[0] });
988996
assertEvent({ item: grid.items[0], selected: false, shiftKey: false });
989997
});
990998

991999
it('should fire the event when toggling an item with Shift + click', async () => {
9921000
await sendKeys({ down: 'Shift' });
993-
await mouseClick(rows[0]);
1001+
await sendMouseToElement({ type: 'click', element: rows[0] });
1002+
await sendKeys({ up: 'Shift' });
1003+
assertEvent({ item: grid.items[0], selected: true, shiftKey: true });
1004+
1005+
await sendKeys({ down: 'Shift' });
1006+
await sendMouseToElement({ type: 'click', element: rows[0] });
1007+
await sendKeys({ up: 'Shift' });
1008+
assertEvent({ item: grid.items[0], selected: false, shiftKey: true });
1009+
});
1010+
1011+
it('should fire the event when toggling an item with mousedown + Shift + mouseup', async () => {
1012+
await sendMouseToElement({ type: 'move', element: rows[0] });
1013+
1014+
await sendMouse({ type: 'down' });
1015+
await sendKeys({ down: 'Shift' });
1016+
await sendMouse({ type: 'up' });
9941017
await sendKeys({ up: 'Shift' });
9951018
assertEvent({ item: grid.items[0], selected: true, shiftKey: true });
9961019

1020+
await sendMouse({ type: 'down' });
9971021
await sendKeys({ down: 'Shift' });
998-
await mouseClick(rows[0]);
1022+
await sendMouse({ type: 'up' });
9991023
await sendKeys({ up: 'Shift' });
10001024
assertEvent({ item: grid.items[0], selected: false, shiftKey: true });
10011025
});
@@ -1021,17 +1045,17 @@ describe('multi selection column', () => {
10211045
});
10221046

10231047
it('should prevent text selection when selecting a range of items with Shift + click', async () => {
1024-
await mouseClick(rows[0]);
1048+
await sendMouseToElement({ type: 'click', element: rows[0] });
10251049
await sendKeys({ down: 'Shift' });
1026-
await mouseClick(rows[1]);
1050+
await sendMouseToElement({ type: 'click', element: rows[1] });
10271051
await sendKeys({ up: 'Shift' });
10281052
expect(document.getSelection().toString()).to.be.empty;
10291053
});
10301054

10311055
it('should allow text selection after selecting a range of items with Shift + click', async () => {
1032-
await mouseClick(rows[0]);
1056+
await sendMouseToElement({ type: 'click', element: rows[0] });
10331057
await sendKeys({ down: 'Shift' });
1034-
await mouseClick(rows[1]);
1058+
await sendMouseToElement({ type: 'click', element: rows[1] });
10351059
await sendKeys({ up: 'Shift' });
10361060

10371061
const row2CellContent1 = getBodyCellContent(grid, 2, 1);

0 commit comments

Comments
 (0)