Stimulus Discourse

Really odd behavior on checkbox targets

Please attached GIF below to see what I’m experiencing. I have a method called “showHideEditable” in which I check whether the event.currentTarget is checked or not…and based on that, I show and hide the appropriate editableElements. If the event.currentTarget has data-id === '0' then all editableElements are either ‘shown’ or ‘hidden’ from the end-user; otherwise, editableElements having the same data-id as of the clicked checkbox are ‘shown’ or ‘hidden’. I am not sure how the individual checkboxes are holding onto their state?

20190729-001

Can you share your implementation?

Nevermind, I resolved my issue. Here’s what the problem was. To set and unset the checked attribute on the checkboxes, I was using the following code:

/** check all the checkboxes **/
this.itemCheckboxTargets.forEach((c) => c.setAttribute('checked', true));
/** uncheck all the checkboxes **/
this.itemCheckboxTargets.forEach((c) => c.removeAttribute('checked'));

I simply changed the set/unset syntax to the following and now everything works as expected:

/** check all the checkboxes **/
this.itemCheckboxTargets.forEach((c) => c.checked = true);
/** uncheck all the checkboxes **/
this.itemCheckboxTargets.forEach((c) => c.checked = false);

Would anyone know why?