fix(data-table): block (rowClick) event when clicking on checkbox (cl…

…oses #611) (#619)

* fix(data-table): not throw (rowClick) event when clicking on checkbox

even though clicking on the checkbox is still clicking on the row, we need to block this since people want to navigate when clickin on row and select when clicking on checkbox

* Instead of looking for a tag name to know to stop the event propogation, added an attribute to the tag to look for. Looking for the tag name could be problamatic in that what if someone wants to put their own md-pseudo-checkbox on a cell.

* changing attribute name to stopRowClick

src/platform/core/data-table/data-table.component.html

@@ -30,7 +30,7 @@
         [tabIndex]="isSelectable ? 0 : -1"
         [class.mat-selected]="(isClickable || isSelectable) && isRowSelected(row)"
         *ngFor="let row of data; let rowIndex = index"
-        (click)="handleRowClick(row, $event, rowIndex)"
+        (click)="handleRowClick(row, $event)"
         (keyup)="isSelectable && _rowKeyup($event, row, rowIndex)"
         (keydown.space)="blockEvent($event)"
         (keydown.shift.space)="blockEvent($event)"
@@ -41,6 +41,7 @@
           [state]="isRowSelected(row) ? 'checked' : 'unchecked'"
           (mousedown)="disableTextSelection()"
           (mouseup)="enableTextSelection()"
+          stopRowClick
           (click)="select(row, $event, rowIndex)">
         </md-pseudo-checkbox>
       </td>

src/platform/core/data-table/data-table.component.spec.ts

@@ -29,6 +29,7 @@ describe('Component: DataTable', () => {
         TdDataTableBasicTestComponent,
         TdDataTableSelectableTestComponent,
         TdDataTableRowClickTestComponent,
+        TdDataTableSelectableRowClickTestComponent,
       ],
       providers: [
         TdDataTableService,
@@ -330,6 +331,38 @@ describe('Component: DataTable', () => {
           });
         });
     })));
+
+    it('should click on a row and see the rowClick event only when clicking on row',
+      async(inject([], () => {
+        let fixture: ComponentFixture<any> = TestBed.createComponent(TdDataTableSelectableRowClickTestComponent);
+        let component: TdDataTableSelectableRowClickTestComponent = fixture.debugElement.componentInstance;
+
+        component.clickable = true;
+        component.selectable = true;
+
+        let clickEventSpy: jasmine.Spy = spyOn(component, 'clickEvent');
+        let selectEventSpy: jasmine.Spy = spyOn(component, 'selectEvent');
+
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+          fixture.debugElement.queryAll(By.directive(TdDataTableRowComponent))[1].nativeElement.click();
+          fixture.detectChanges();
+          fixture.whenStable().then(() => {
+            expect(clickEventSpy.calls.count()).toBe(1);
+            expect(selectEventSpy.calls.count()).toBe(0);
+
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+              fixture.debugElement.queryAll(By.directive(MdPseudoCheckbox))[0].nativeElement.click();
+              fixture.detectChanges();
+              fixture.whenStable().then(() => {
+                expect(clickEventSpy.calls.count()).toBe(1);
+                expect(selectEventSpy.calls.count()).toBe(1);
+              });
+            });
+          });
+        });
+    })));
   });
 });
 
@@ -392,3 +425,34 @@ class TdDataTableRowClickTestComponent {
     /* noop */
   }
 }
+
+@Component({
+  template: `
+    <td-data-table
+        [data]="data"
+        [columns]="columns"
+        [selectable]="selectable"
+        [clickable]="clickable"
+        (rowClick)="clickEvent()"
+        (rowSelect)="selectEvent()">
+    </td-data-table>`,
+})
+class TdDataTableSelectableRowClickTestComponent {
+  data: any[] = [
+    { sku: '1452-2', item: 'Pork Chops', price: 32.11 },
+    { sku: '1421-0', item: 'Prime Rib', price: 41.15 },
+  ];
+  columns: ITdDataTableColumn[] = [
+    { name: 'sku', label: 'SKU #' },
+    { name: 'item', label: 'Item name' },
+    { name: 'price', label: 'Price (US$)', numeric: true },
+  ];
+  selectable: boolean = false;
+  clickable: boolean = false;
+  clickEvent(): void {
+    /* noop */
+  }
+  selectEvent(): void {
+    /* noop */
+  }
+}

src/platform/core/data-table/data-table.component.ts

@@ -435,9 +435,14 @@ export class TdDataTableComponent implements ControlValueAccessor, AfterContentI
    * emits the onRowClickEvent when a row is clicked
    * if clickable is true and selectable is false then select the row
    */
-  handleRowClick(row: any, event: Event, currentSelected: number): void {
+  handleRowClick(row: any, event: Event): void {
     if (this.isClickable) {
-      this.onRowClick.emit({row: row});
+      // ignoring linting rules here because attribute it actually null or not there
+      // can't check for undefined
+      /* tslint:disable-next-line */
+      if (event.srcElement.getAttribute('stopRowClick') === null) {
+        this.onRowClick.emit({row: row});
+      }
     }
   }