Merge pull request #5739 from IgniteUI/SKrastev/fix-5730-master

fix(IgxDrag): Fix no being able to detect click event correctly when here is no ghost.

Author: kdinev

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -372,6 +372,23 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
     @Output()
     public dragEnd = new EventEmitter<IDragBaseEventArgs>();
 
+    /**
+     * Event triggered when the draggable element is clicked.
+     * ```html
+     * <div igxDrag (dragClick)="onDragClick()">
+     *         <span>Drag Me!</span>
+     * </div>
+     * ```
+     * ```typescript
+     * public onDragClick(){
+     *      alert("The element has been clicked!");
+     * }
+     * ```
+     * @memberof IgxDragDirective
+     */
+    @Output()
+    public dragClick = new EventEmitter<IDragBaseEventArgs>();
+
     /**
      * Event triggered when the drag ghost element is created.
      * ```html
@@ -423,24 +440,6 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
     @Output()
     public transitioned = new EventEmitter<IDragBaseEventArgs>();
 
-    /**
-     * @deprecated
-     * Event triggered when the draggable element is clicked.
-     * ```html
-     * <div igxDrag (dragClicked)="dragClicked()">
-     *         <span>Drag Me!</span>
-     * </div>
-     * ```
-     * ```typescript
-     * public dragClicked(){
-     *      alert("The element has been clicked!");
-     * }
-     * ```
-     * @memberof IgxDragDirective
-     */
-    @Output()
-    public dragClicked = new EventEmitter<IDragBaseEventArgs>();
-
     /**
      * @hidden
      */
@@ -1046,6 +1045,9 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
             if (!this.animInProgress) {
                 this.onTransitionEnd(null);
             }
+        } else {
+            // Trigger our own click event because when there is no ghost, native click cannot be prevented when dragging.
+            this.dragClick.emit(eventArgs);
         }
     }
 

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts

@@ -190,6 +190,7 @@ describe('General igxDrag/igxDrop', () => {
 
         spyOn(firstDrag.ghostCreate, 'emit');
         spyOn(firstDrag.ghostDestroy, 'emit');
+        spyOn(firstDrag.dragClick, 'emit');
         expect(document.getElementsByClassName('dragElem').length).toEqual(3);
 
         // Step 1.
@@ -199,6 +200,7 @@ describe('General igxDrag/igxDrop', () => {
 
         expect(firstDrag.ghostCreate.emit).not.toHaveBeenCalled();
         expect(firstDrag.ghostDestroy.emit).not.toHaveBeenCalled();
+        expect(firstDrag.dragClick.emit).not.toHaveBeenCalled();
 
         // Step 2.
         UIInteractions.simulatePointerEvent('pointermove', firstElement, startingX + 10, startingY + 10);
@@ -209,6 +211,7 @@ describe('General igxDrag/igxDrop', () => {
         expect(document.getElementsByClassName('dragElem').length).toEqual(3);
         expect(firstDrag.ghostCreate.emit).not.toHaveBeenCalled();
         expect(firstDrag.ghostDestroy.emit).not.toHaveBeenCalled();
+        expect(firstDrag.dragClick.emit).not.toHaveBeenCalled();
 
         // Step 3.
         // We need to trigger the pointerup on the ghostElement because this is the element we move and is under the mouse
@@ -220,6 +223,7 @@ describe('General igxDrag/igxDrop', () => {
         expect(document.getElementsByClassName('dragElem').length).toEqual(3);
         expect(firstDrag.ghostCreate.emit).not.toHaveBeenCalled();
         expect(firstDrag.ghostDestroy.emit).not.toHaveBeenCalled();
+        expect(firstDrag.dragClick.emit).toHaveBeenCalled();
     }));
 
     it('should position ghost at the same position relative to the mouse when drag started.', (async() => {
@@ -454,6 +458,7 @@ describe('General igxDrag/igxDrop', () => {
         firstDrag.dragTolerance = 25;
 
         spyOn(firstDrag.dragStart, 'emit');
+        spyOn(firstDrag.dragClick, 'emit');
 
         // Step 1.
         UIInteractions.simulatePointerEvent('pointerdown', firstElement, startingX, startingY);
@@ -471,6 +476,7 @@ describe('General igxDrag/igxDrop', () => {
         expect(firstElement.getBoundingClientRect().left).toEqual(dragDirsRects[0].left);
         expect(firstElement.getBoundingClientRect().top).toEqual(dragDirsRects[0].top);
         expect(firstDrag.dragStart.emit).not.toHaveBeenCalled();
+        expect(firstDrag.dragClick.emit).not.toHaveBeenCalled();
 
         // Step 3.
         UIInteractions.simulatePointerEvent('pointermove', firstElement, startingX + 20, startingY + 20);
@@ -481,6 +487,7 @@ describe('General igxDrag/igxDrop', () => {
         expect(firstElement.getBoundingClientRect().left).toEqual(dragDirsRects[0].left);
         expect(firstElement.getBoundingClientRect().top).toEqual(dragDirsRects[0].top);
         expect(firstDrag.dragStart.emit).not.toHaveBeenCalled();
+        expect(firstDrag.dragClick.emit).not.toHaveBeenCalled();
 
         // Step 4.
         UIInteractions.simulatePointerEvent('pointerup', firstElement, startingX + 20, startingY + 20);
@@ -490,6 +497,7 @@ describe('General igxDrag/igxDrop', () => {
         expect(firstElement.getBoundingClientRect().left).toEqual(dragDirsRects[0].left);
         expect(firstElement.getBoundingClientRect().top).toEqual(dragDirsRects[0].top);
         expect(firstDrag.dragStart.emit).not.toHaveBeenCalled();
+        expect(firstDrag.dragClick.emit).toHaveBeenCalled();
     }));
 
     it('should correctly apply dragTolerance of 0 when it is set to 0 and ghost is disabled.', (async() => {

src/app/drag-drop/drag-drop.sample.html

@@ -5,7 +5,7 @@
                 <h4 class="sample-title">No ghost dragging:</h4>
                 <div [style.height.px]="100">
                     <div [igxDrag]="{ dragged: false }" [ghost]="false" class="dialog" [dragChannel]="['Suspect']"
-                        (dragStart)="draggedElem = true" (dragEnd)="draggedElem = false">
+                        (dragStart)="draggedElem = true" (dragEnd)="draggedElem = false" (dragClick)="dragClick($event)">
                         <span *ngIf="!draggedElem">Drag me</span>
                         <span *ngIf="draggedElem">Weeeee</span>
                     </div>
@@ -15,7 +15,7 @@ <h4 class="sample-title">Ghost and base templating:</h4>
                 <div #ghostHost [style.height.px]="100">
                     <div [igxDrag]="{ id: 'customGhost'}" [dragChannel]="'Suspect'"  [ghostTemplate]="dragGhost"
                         [ngClass]="customDragged ? 'dragWithGhostPlaceholder' : 'dragWithGhostDefault'"
-                        (dragStart)="customDragged = true" (dragEnd)="customDragged = false">
+                        (dragStart)="customDragged = true" (dragEnd)="customDragged = false"  (dragClick)="dragClick($event)">
                         <span *ngIf="!customDragged">Drag me</span>
                         <ng-template #dragGhost>
                             <div class="customGhost">

src/app/drag-drop/drag-drop.sample.ts

@@ -365,4 +365,8 @@ export class DragDropSampleComponent {
             }
         });
     }
+
+    public dragClick() {
+        console.log('click');
+    }
 }