fix: don't fire drop events when the droppable element is scrolled out of the view

Author: mattlewis92

src/droppable.directive.ts

@@ -83,9 +83,10 @@ export class DroppableDirective implements OnInit, OnDestroy {
           this.element.nativeElement,
           this.dragActiveClass
         );
-        const droppableRectangle: {
-          cache?: ClientRect;
+        const droppableElement: {
+          rect?: ClientRect;
           updateCache: boolean;
+          scrollContainerRect?: ClientRect;
         } = {
           updateCache: true
         };
@@ -96,23 +97,38 @@ export class DroppableDirective implements OnInit, OnDestroy {
             : 'window',
           'scroll',
           () => {
-            droppableRectangle.updateCache = true;
+            droppableElement.updateCache = true;
           }
         );
 
         let currentDragDropData: any;
         const overlaps$ = drag$.pipe(
           map(({ clientX, clientY, dropData }) => {
             currentDragDropData = dropData;
-            if (droppableRectangle.updateCache) {
-              droppableRectangle.cache = this.element.nativeElement.getBoundingClientRect();
-              droppableRectangle.updateCache = false;
+            if (droppableElement.updateCache) {
+              droppableElement.rect = this.element.nativeElement.getBoundingClientRect();
+              if (this.scrollContainer) {
+                droppableElement.scrollContainerRect = this.scrollContainer.elementRef.nativeElement.getBoundingClientRect();
+              }
+              droppableElement.updateCache = false;
             }
-            return isCoordinateWithinRectangle(
+            const isWithinElement = isCoordinateWithinRectangle(
               clientX,
               clientY,
-              droppableRectangle.cache as ClientRect
+              droppableElement.rect as ClientRect
             );
+            if (droppableElement.scrollContainerRect) {
+              return (
+                isWithinElement &&
+                isCoordinateWithinRectangle(
+                  clientX,
+                  clientY,
+                  droppableElement.scrollContainerRect as ClientRect
+                )
+              );
+            } else {
+              return isWithinElement;
+            }
           })
         );
 

test/droppable.directive.spec.ts

@@ -301,19 +301,34 @@ describe('droppable directive', () => {
     triggerDomEvent('mousedown', draggableElement, { clientX: 5, clientY: 10 });
     triggerDomEvent('mousemove', draggableElement, {
       clientX: 5,
-      clientY: 60
+      clientY: 11
     });
-    scrollFixture.componentInstance.scrollContainer.elementRef.nativeElement.scrollTop = 100;
+    scrollFixture.componentInstance.scrollContainer.elementRef.nativeElement.scrollTop = 150;
     scrollFixture.debugElement
       .query(By.directive(DraggableScrollContainerDirective))
       .triggerEventHandler('scroll', {});
     triggerDomEvent('mousemove', draggableElement, {
       clientX: 5,
-      clientY: 61
+      clientY: 10
     });
-    triggerDomEvent('mouseup', draggableElement, { clientX: 5, clientY: 61 });
+    triggerDomEvent('mouseup', draggableElement, { clientX: 5, clientY: 10 });
     expect(scrollFixture.componentInstance.drop).to.have.been.calledWith({
       dropData: { foo: 'bar' }
     });
   });
+
+  it('should not fire drop events when the element is scrolled out of the view', () => {
+    const scrollFixture = TestBed.createComponent(ScrollTestComponent);
+    scrollFixture.detectChanges();
+    document.body.appendChild(scrollFixture.nativeElement);
+    const draggableElement =
+      scrollFixture.componentInstance.draggableElement.nativeElement;
+    triggerDomEvent('mousedown', draggableElement, { clientX: 5, clientY: 10 });
+    triggerDomEvent('mousemove', draggableElement, {
+      clientX: 5,
+      clientY: 150
+    });
+    triggerDomEvent('mouseup', draggableElement, { clientX: 5, clientY: 150 });
+    expect(scrollFixture.componentInstance.drop).not.to.have.been.called;
+  });
 });