[checkbox] Only first item in checkbox group remains "checked"

[moderndeveloperllc]

Description

For some instances of checkbox-group that is programatically created, if all boxes are checked, Polymer will uncheck everything but the first box in it's element async updater. I have others that are working fine, but the below example just breaks.

Expected outcome

All checkbox should be checked

Actual outcome

Only first checkbox

Live Demo

https://glitch.com/edit/#!/subsequent-sumac

[web-padawan]

That's interesting. Can not confirm it locally but something is apparently broken.

[moderndeveloperllc]

@web-padawan It's rather vexing in that I had two loops in the same component - one worked fine, one didn't. I was able to work around the issue by not looping through the individual checkboxes and setting .checked = true, but by setting the .value of the checkbox group afterwards. That works in my case because I'm defaulting to everything being checked.

   for (const stat of orderStatus) {
     const filterCheckbox = document.createElement('vaadin-checkbox');
     filterCheckbox.innerText = stat;
--   filterCheckbox.checked = true;
     filterCheckbox.setAttribute('value', stat);
     deliveryCheckboxGroup.append(filterCheckbox);
   }
++ deliveryCheckboxGroup.value = orderStatus;

I stepped through the JS execution. All the checkboxes are set properly until Polymer's property update when they become unchecked. I'm not experienced enough in the Polymer internals to properly debug at that point. The fact that it works sometimes, but not others makes me feel like it's an async timing issue, somehow.

[moderndeveloperllc]

@web-padawan FYI, this is still an issue it looks like an issue when setting the values of a checkbox group on a checkbox-by-checkbox value.

[filip-paczynski]

I can confirm, this is still an issue at current version (3.0.0).
Workaround by setting .value on group element works.