fix: always remove global styles when clicking draggable elements

Fixes #44

Author: mattlewis92

src/draggable.directive.ts

@@ -237,6 +237,13 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
           this.dragPointerDown.next({ x: 0, y: 0 });
         });
 
+        const dragComplete$ = merge(
+          this.pointerUp$,
+          this.pointerDown$,
+          cancelDrag$,
+          this.destroy$
+        ).pipe(share());
+
         const pointerMove = combineLatest<
           PointerEvent,
           { top: number; left: number }
@@ -290,14 +297,7 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
           filter(
             ({ x, y }) => !this.validateDrag || this.validateDrag({ x, y })
           ),
-          takeUntil(
-            merge(
-              this.pointerUp$,
-              this.pointerDown$,
-              cancelDrag$,
-              this.destroy$
-            )
-          ),
+          takeUntil(dragComplete$),
           share()
         );
 
@@ -403,7 +403,6 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
             })
           )
           .subscribe(({ x, y, dragCancelled }) => {
-            this.document.head.removeChild(globalDragStyle);
             this.zone.run(() => {
               this.dragEnd.next({ x, y, dragCancelled });
             });
@@ -414,6 +413,12 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
             currentDrag$.complete();
           });
 
+        merge(dragComplete$, dragEnded$)
+          .pipe(take(1))
+          .subscribe(() => {
+            this.document.head.removeChild(globalDragStyle);
+          });
+
         return pointerMove;
       }),
       share()

test/draggable.directive.spec.ts

@@ -804,4 +804,17 @@ describe('draggable directive', () => {
       dragCancelled: false
     });
   });
+
+  it('should allow elements to be selected if clicking but not dragging the element', () => {
+    const tmp = document.createElement('div');
+    tmp.innerHTML = 'foo';
+    document.body.appendChild(tmp);
+    expect(getComputedStyle(tmp).userSelect).to.equal('auto');
+    const draggableElement =
+      fixture.componentInstance.draggableElement.nativeElement;
+    triggerDomEvent('mousedown', draggableElement, { clientX: 5, clientY: 10 });
+    expect(getComputedStyle(tmp).userSelect).to.equal('none');
+    triggerDomEvent('mouseup', draggableElement, { clientX: 5, clientY: 10 });
+    expect(getComputedStyle(tmp).userSelect).to.equal('auto');
+  });
 });