This repository has been archived by the owner on Jan 13, 2025. It is now read-only.
Closed
Description
Bug report
MDCList will try to toggle checkboxes even when this specific list item does not have a checkbox
Steps to reproduce
- Create an MDCList with two items where the first item contains a checkbox, and the second does not.
- It may be necessary to call mdcList.layout()
- Click on the second item
- See error in console
TypeError: Cannot read property 'checked' of null
Actual behavior
mdc list assumes that all items contain checkboxes. and tries read property checked
from it. If there is no checkbox, the document selector returns null and the assertion fails at:
Uncaught TypeError: Cannot read property 'checked' of null
at Object.isCheckboxCheckedAtIndex (component.ts:265)
at MDCListFoundation.toggleCheckboxAtIndex_ (foundation.ts:647)
at MDCListFoundation.setSelectedIndexOnAction_ (foundation.ts:639)
at MDCListFoundation.handleClick (foundation.ts:372)
at MDCList.handleClickEvent (component.ts:410)
Expected behavior
MDC should not try to toggle the checkbox it doesn't exist
Your Environment:
Software | Version(s) |
---|---|
MDC Web | 10.0.0 |
Browser | Chrome Version 88.0.4324.150 |
Operating System | Linux 20.04.1-Ubuntu |
Possible solution
Gracefully accessing the property at "component.ts:265" is a possible soution. I.e. toggleEl?.checked
This could also be needed in other places where listItem.querySelector<HTMLInputElement>(strings.CHECKBOX_SELECTOR);
or similar is used.
Another solution could be to fix the todo at
and actually check all items before assuming that a list is a checkBoxList