google / google/material-design-lite

check all in data table only works for td headers without th

Open
#5,208 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

MDL version: v1.3.0
Browser: All
Browser version: All
Operating system: All
Operating system version: All

Description:
I encountered an issue regarding to the usage of th headers column instead of td(s) as example in https://getmdl.io/components/index.html#tables-section.

What steps will reproduce the problem:
* create a data table with th headers instead of td(s).
* click the first checkbox of table header.
* issue will occur as: Uncaught TypeError: Cannot read property 'querySelector' of null
at b. (data-table.js:78).
* completed.

Solution:
I think that we shall check the existance of td node(s) before querying them. e.g.
```javascript
if (checkbox.checked) {
for (i = 0; i < opt_rows.length; i++) {
var tdQuerySelector = opt_rows[i].querySelector('td'); // added
if (tdQuerySelector) { // added
el = tdQuerySelector.querySelector('.mdl-checkbox'); // modified
el['MaterialCheckbox'].check();
opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED);
} // added
}
} else {
for (i = 0; i < opt_rows.length; i++) {
var tdQuerySelector = opt_rows[i].querySelector('td'); // added
if (tdQuerySelector) { // added
el = tdQuerySelector.querySelector('.mdl-checkbox'); // modified
el['MaterialCheckbox'].uncheck();
opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
} // added
}
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.