material-components-web
material-components-web copied to clipboard
[MDCList] Checkboxes do not toggle anymore
Bug report
In version 14, clicking a list item or a checkbox in a list with checkbox items does not toggle the checkbox, if the list is initialized with the MDCList JavaScript component.
Steps to reproduce
- Use the code example "List with checkbox items" shown in the README of the list component
- Initialize the list using
const list = new MDCList(document.querySelector('.mdc-deprecated-list'));
Actual behavior
Clicking a list item does not change the checked-state of the checkbox. Neither does clicking the checkbox.
Expected behavior
Clicking a list item changes the checked-state of the checkbox. So should clicking the checkbox itself.
Your Environment:
Software | Version(s) |
---|---|
MDC Web | 14.0 |
Possible solution
Debugging the code reveals that the state of the checkbox actually is changed twice. From 'unchecked' to 'checked' and back to 'unchecked' again. Or from 'checked' to 'unchecked' and back to 'checked' again.
It looks like the cause of this problem was introduced in the commit of list\foundation.js
on December 10, 2021. Then, the name and the meaning of the second parameter in function handleClick
in list\foundation.js
was changed. From toggleCheckbox
("please toggle the checkbox") to isCheckboxAlreadyUpdatedInAdapter
("do not toggle the checkbox, because it already has been toggled").
The caller function MDCList.prototype.handleClickEvent
in list\component.js
is unaware of this commit, as the comment in this function indicates (there, the parameter still is called toggleCheckbox
). Changing this line of code:
this.foundation.handleClick(index, toggleCheckbox, evt);
to:
this.foundation.handleClick(index, !toggleCheckbox, evt);
causes the checkboxes to work as expected.
I too have had this problem. Only solution I can find is to put them inside the mdc-form-field and initiate each checkbox like this.
Why hasn't anyone fixed it?