fix: use row loading state for drag/drop disabled state

vaadin · Nov 1, 2021 · b247d04 · b247d04
1 parent a4a2e75
commit b247d04
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/packages/grid/src/vaadin-grid-drag-and-drop-mixin.js b/packages/grid/src/vaadin-grid-drag-and-drop-mixin.js
@@ -374,8 +374,9 @@ export const DragAndDropMixin = (superClass) =>
      * @protected
      */
     _filterDragAndDrop(row, model) {
-      const dragDisabled = !this.rowsDraggable || this.loading || (this.dragFilter && !this.dragFilter(model));
-      const dropDisabled = !this.dropMode || this.loading || (this.dropFilter && !this.dropFilter(model));
+      const loading = this.loading || row.hasAttribute('loading');
+      const dragDisabled = !this.rowsDraggable || loading || (this.dragFilter && !this.dragFilter(model));
+      const dropDisabled = !this.dropMode || loading || (this.dropFilter && !this.dropFilter(model));
 
       const draggableElements = Array.from(row.children).map((cell) => cell._content);
 

diff --git a/packages/grid/test/drag-and-drop.test.js b/packages/grid/test/drag-and-drop.test.js
@@ -700,7 +700,7 @@ describe('drag and drop', () => {
 
       beforeEach(() => {
         grid.dataProvider = (_params, callback) => {
-          finishLoadingItems = () => callback(getTestItems());
+          finishLoadingItems = (items) => callback(items || getTestItems());
         };
       });
 
@@ -719,6 +719,19 @@ describe('drag and drop', () => {
         grid.dragFilter = sinon.spy();
         expect(grid.dragFilter.called).to.be.false;
       });
+
+      it('should disable row drag for rows without an item', () => {
+        finishLoadingItems([getTestItems()[0], undefined]);
+        expect(getDraggable(grid, 1)).not.to.be.ok;
+        expect(grid.$.items.children[1].hasAttribute('drag-disabled')).to.be.true;
+      });
+
+      it('should enable row drag once items are available', () => {
+        finishLoadingItems([getTestItems()[0], undefined]);
+        finishLoadingItems();
+        expect(getDraggable(grid, 1)).to.be.ok;
+        expect(grid.$.items.children[1].hasAttribute('drag-disabled')).to.be.false;
+      });
     });
   });
 
@@ -782,7 +795,7 @@ describe('drag and drop', () => {
 
       beforeEach(() => {
         grid.dataProvider = (_params, callback) => {
-          finishLoadingItems = () => callback(getTestItems());
+          finishLoadingItems = (items) => callback(items || getTestItems());
         };
       });
 
@@ -805,6 +818,23 @@ describe('drag and drop', () => {
         grid.dropFilter = sinon.spy();
         expect(grid.dropFilter.called).to.be.false;
       });
+
+      it('should disable drop on row for rows without an item', () => {
+        finishLoadingItems([getTestItems()[0], undefined]);
+        const row = grid.$.items.children[1];
+        fireDragOver(row, 'above');
+        expect(row.hasAttribute('dragover')).to.be.false;
+        expect(row.hasAttribute('drop-disabled')).to.be.true;
+      });
+
+      it('should enable drop on row once items are available', () => {
+        finishLoadingItems([getTestItems()[0], undefined]);
+        finishLoadingItems();
+        const row = grid.$.items.children[1];
+        fireDragOver(row, 'above');
+        expect(row.hasAttribute('dragover')).to.be.true;
+        expect(row.hasAttribute('drop-disabled')).to.be.false;
+      });
     });
   });