material-components-web icon indicating copy to clipboard operation
material-components-web copied to clipboard

[MDCList] Checkboxes do not toggle anymore

Open henkpb opened this issue 2 years ago • 3 comments

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

  1. Use the code example "List with checkbox items" shown in the README of the list component
  2. 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.

henkpb avatar May 18 '22 12:05 henkpb

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.

youbet1980 avatar May 19 '22 02:05 youbet1980

Why hasn't anyone fixed it?

XX avatar Oct 21 '22 20:10 XX