Skip to content

Commit 067c827

Browse files
authored
fix: add and remove drag-source when scrolling (#7663)
* fix: add/remove drag-source when scrolling * address feedback * add an expect to a test * fix: update tests and component prop default value * fix: reorder and update tests * reorder test * remove redundant rowsDraggable
1 parent f50d8c2 commit 067c827

File tree

3 files changed

+37
-18
lines changed

3 files changed

+37
-18
lines changed

packages/grid/src/vaadin-grid-drag-and-drop-mixin.js

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,11 @@ export const DragAndDropMixin = (superClass) =>
103103
__dndAutoScrollThreshold: {
104104
value: 50,
105105
},
106+
107+
/** @private */
108+
__draggedItems: {
109+
value: () => [],
110+
},
106111
};
107112
}
108113

@@ -170,6 +175,8 @@ export const DragAndDropMixin = (superClass) =>
170175
.filter((row) => !this.dragFilter || this.dragFilter(this.__getRowModel(row)));
171176
}
172177

178+
this.__draggedItems = rows.map((row) => row._item);
179+
173180
// Set the default transfer data
174181
e.dataTransfer.setData('text', this.__formatDefaultTransferData(rows));
175182

@@ -181,14 +188,12 @@ export const DragAndDropMixin = (superClass) =>
181188
updateBooleanRowStates(row, { dragstart: false });
182189
this.style.setProperty('--_grid-drag-start-x', '');
183190
this.style.setProperty('--_grid-drag-start-y', '');
184-
rows.forEach((row) => {
185-
updateBooleanRowStates(row, { 'drag-source': true });
186-
});
191+
this.requestContentUpdate();
187192
});
188193

189194
const event = new CustomEvent('grid-dragstart', {
190195
detail: {
191-
draggedItems: rows.map((row) => row._item),
196+
draggedItems: [...this.__draggedItems],
192197
setDragData: (type, data) => e.dataTransfer.setData(type, data),
193198
setDraggedItemsCount: (count) => row.setAttribute('dragstart', count),
194199
},
@@ -206,9 +211,8 @@ export const DragAndDropMixin = (superClass) =>
206211
event.originalEvent = e;
207212
this.dispatchEvent(event);
208213

209-
iterateChildren(this.$.items, (row) => {
210-
updateBooleanRowStates(row, { 'drag-source': false });
211-
});
214+
this.__draggedItems = [];
215+
this.requestContentUpdate();
212216
}
213217

214218
/** @private */
@@ -338,6 +342,11 @@ export const DragAndDropMixin = (superClass) =>
338342
});
339343
}
340344

345+
/** @private */
346+
__updateDragSourceParts(row, model) {
347+
updateBooleanRowStates(row, { 'drag-source': this.__draggedItems.includes(model.item) });
348+
}
349+
341350
/** @private */
342351
_onDrop(e) {
343352
if (this.dropMode) {

packages/grid/src/vaadin-grid-mixin.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -968,6 +968,7 @@ export const GridMixin = (superClass) =>
968968
this._generateCellClassNames(row, model);
969969
this._generateCellPartNames(row, model);
970970
this._filterDragAndDrop(row, model);
971+
this.__updateDragSourceParts(row, model);
971972

972973
iterateChildren(row, (cell) => {
973974
if (cell._column && !cell._column.isConnected) {

packages/grid/test/drag-and-drop.common.js

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -266,26 +266,21 @@ describe('drag and drop', () => {
266266
}
267267
});
268268

269-
it('should add drag-source- part only to dragged rows', async () => {
269+
it('should add drag-source- part to dragged rows', async () => {
270270
fireDragStart();
271-
let cells = getRowBodyCells(getRows(grid.$.items)[0]);
272271
await nextFrame();
273-
for (const cell of cells) {
272+
for (const cell of getRowBodyCells(getRows(grid.$.items)[0])) {
274273
expect(cell.getAttribute('part')).to.contain('drag-source-row-cell');
275274
}
276-
cells = getRowBodyCells(getRows(grid.$.items)[1]);
277-
for (const cell of cells) {
278-
expect(cell.getAttribute('part')).to.not.contain('drag-source-row-cell');
279-
}
280275
});
281276

282-
it('should remove drag-source- part from row when drag ends', async () => {
277+
it('should remove drag-source- part from dragged rows', async () => {
283278
fireDragStart();
284-
const row = getRows(grid.$.items)[0];
285-
const cells = getRowBodyCells(row);
286279
await nextFrame();
280+
287281
fireDragEnd();
288-
for (const cell of cells) {
282+
await nextFrame();
283+
for (const cell of getRowBodyCells(getRows(grid.$.items)[0])) {
289284
expect(cell.getAttribute('part')).to.not.contain('drag-source-row-cell');
290285
}
291286
});
@@ -1073,5 +1068,19 @@ describe('drag and drop', () => {
10731068
fireDragOver(grid.__getViewportRows()[0], 'above');
10741069
expect(grid.$.table.scrollTop).to.be.within(scrollTop - 200, scrollTop - 100);
10751070
});
1071+
1072+
it('should add/remove drag-source- part when scrolling', () => {
1073+
grid.rowsDraggable = true;
1074+
grid.selectItem(grid.items[0]);
1075+
fireDragStart();
1076+
1077+
// Scroll down so that the drag source cell leaves the viewport
1078+
grid.scrollToIndex(50);
1079+
// Expect no cells with drag-source-row-cell part in the DOM
1080+
expect(grid.$.items.querySelector('tr:not([hidden]) [part~="drag-source-row-cell"]')).to.be.null;
1081+
1082+
grid.scrollToIndex(0);
1083+
expect(getFirstCell(grid).getAttribute('part')).to.contain('drag-source-row-cell');
1084+
});
10761085
});
10771086
});

0 commit comments

Comments
 (0)