Paper-checkbox when value goes from true to undefined, shows "selected" background, but without the checkmark

[jamesmgg]

Description

paper-checkbox when set to true, and then set to undefined, shows unexpected behavior -- the checkmark disappears, but the "checked" background stays

Expected outcome

Both checkmark and "checked" background should disappear when checked != true

Actual outcome

paper-checkbox when checked set to undefined (when it previously was set to true), shows blue background without checkmark

Live Demo

Sorry, just want to do a quick report.

Steps to reproduce

Put a paper-checkbox with an attribute set to true:
// scope = {publicProfile:true}
<paper-checkbox checked$="{{scope.publicProfile}}"></paper-checkbox>

then set scope to empty to make publicProfile undefined
this.set("scope", {})

you should now see the unexpected behavior.

Do note that using checked$ instead of checked fixes the issue:
<paper-checkbox checked$="{{scope.publicProfile}}">

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10
  (Haven't tested on other browsers, but same issue should apply)

[bicknellr]

example with bug: http://jsbin.com/ledupa/1/edit?html,output

[bicknellr]

I think this has to do with multi-property observers not firing when their dependencies change to undefined: https://github.com/PolymerElements/paper-checkbox/blob/master/paper-checkbox.html#L227.

[dwberry]

Any resolution?

[mgiuffrida]

Updated repro case that specifies version 1.x: https://jsfiddle.net/yhjcu8hg/

Steps to repro: Press true, then undefined

Result: checkbox shows no checkmark but blue background