Covalent: Clicking on a row in TdDataTableComponent in Firefox throws an error

Created on 13 Jun 2017 · 3Comments · Source: Teradata/covalent

This repository's issues are reserved for feature requests and bug reports.

report a bug?

I've encountered a bug in in TdDataTableComponent in Firefox when clicking on a row. The click event throws an exception.

Version 1.0.0-beta-5-1
Platform: Windows 7 64 bit
Browser: Firefox 53.0.3 (32-bit)
Build tool: angular/cli 1.1.0
Angular: 4.2.0
Material: 2.0.0-beta-6

Bug Report

When clicking on a row in TdDataTableComponent Firefox throws an exception:

ERROR TypeError: t.srcElement is undefined
Stack trace:
/PIw/chandleRowClick@https://teradata.github.io/covalent/main.fe20d4cb369d3e75c16a.bundle.js:1:18213
d/<@https://teradata.github.io/covalent/0.6c7420c821e6df8578f5.chunk.js:1:968753
v@https://teradata.github.io/covalent/vendor.f499cfe2042800d9f111.bundle.js:127:1450
handleEvent@https://teradata.github.io/covalent/vendor.f499cfe2042800d9f111.bundle.js:127:8783
Gt@https://teradata.github.io/covalent/vendor.f499cfe2042800d9f111.bundle.js:78:1741
_e/<@https://teradata.github.io/covalent/vendor.f499cfe2042800d9f111.bundle.js:85:2363
y/<@https://teradata.github.io/covalent/vendor.f499cfe2042800d9f111.bundle.js:613:516
eFQL/invokeTask@https://teradata.github.io/covalent/polyfills.6b496150e0e695b00219.bundle.js:36:8037
onInvokeTask@https://teradata.github.io/covalent/vendor.f499cfe2042800d9f111.bundle.js:160:6667
eFQL/invokeTask@https://teradata.github.io/covalent/polyfills.6b496150e0e695b00219.bundle.js:36:7950
eFQL/runTask@https://teradata.github.io/covalent/polyfills.6b496150e0e695b00219.bundle.js:36:3205
t/this.invoke@https://teradata.github.io/covalent/polyfills.6b496150e0e695b00219.bundle.js:36:9019
vendor.f499cfe2042800d9f111.bundle.js:8:349

Screenshots or link to CodePen/Plunker/JSfiddle

What is the expected behavior?

Click behaviour should work as expected.

Which version of Angular and Material, and which browser and OS does this issue affect?

Did this work in previous versions of Angular / Material?
Please also test with the latest stable and snapshot versions.

Other information

(e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

Source

akrepon

👍2

Most helpful comment

    TdDataTableComponent.prototype.handleRowClick = function (row, event) {
        if (this.isClickable) {
            // 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 });
            }
        }
    };

This code is the culprit. event.srcElement is not available in firefox, should use event.currentTarget. Change the code to:

    TdDataTableComponent.prototype.handleRowClick = function (row, event) {
        if (this.isClickable) {
            // ignoring linting rules here because attribute it actually null or not there
            // can't check for undefined
            /* tslint:disable-next-line */
            const srcElement = event.srcElement || event.currentTarget;
            if (srcElement.getAttribute('stopRowClick') === null) {
                this.onRowClick.emit({ row: row });
            }
        }
    };

rlloyd2001 on 22 Jun 2017

🎉2 👍1

All 3 comments

    TdDataTableComponent.prototype.handleRowClick = function (row, event) {
        if (this.isClickable) {
            // 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 });
            }
        }
    };

This code is the culprit. event.srcElement is not available in firefox, should use event.currentTarget. Change the code to:

    TdDataTableComponent.prototype.handleRowClick = function (row, event) {
        if (this.isClickable) {
            // ignoring linting rules here because attribute it actually null or not there
            // can't check for undefined
            /* tslint:disable-next-line */
            const srcElement = event.srcElement || event.currentTarget;
            if (srcElement.getAttribute('stopRowClick') === null) {
                this.onRowClick.emit({ row: row });
            }
        }
    };

rlloyd2001 on 22 Jun 2017

🎉2 👍1

Awesome! testing the PR for this.