Skip to content
This repository has been archived by the owner on Jan 13, 2025. It is now read-only.

[MDCList] TypeError: Cannot read property 'checked' of null #6846

Closed
@samiemad

Description

Bug report

MDCList will try to toggle checkboxes even when this specific list item does not have a checkbox

Steps to reproduce

  1. Create an MDCList with two items where the first item contains a checkbox, and the second does not.
  2. It may be necessary to call mdcList.layout()
  3. Click on the second item
  4. 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:

return toggleEl!.checked;

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

// TODO(b/172274142): consider all items when determining the list's type.
and actually check all items before assuming that a list is a checkBoxList

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions