:focus style not removed from selected (enlarged) chip after user interaction

[kriscooke]

Expected behavior

On :hover and :focus over a color chip, there is a scale transform applied to transiently enlarge the color chip that is being hovered/focused. The .color:focus:after transform should be removed (along with the focus) once a color has been selected through user interaction.

Actual behavior:

After user interaction, the selected chip remains enlarged. It stays this way even after programmatically changing to a new color and re-opening the color menu - which makes it appear that the wrong color is selected.

Live Demo

http://jsbin.com/xaforakega/edit?html,output

Steps to reproduce

1. Select a color chip in the color picker.
2. Programmatically change the color by clicking the "Change Color" button
3. Open the color menu again by clicking on the picker icon.
4. Notice that the previously selected color chip is still enlarged.
5. Blur the focus by clicking outside of the color menu.
6. The .color:focus:after transform is finally removed (chip becomes same size as the others).

[kriscooke]

I think this is partly a result of paper-swatch-picker not fully hooking into the paper-listbox's IronSelectableBehavior by binding it with an initial selected value of color. The focus style is being applied because the listbox's IronSelectableBehavior is focusing a stale selectedItem.

However in some preliminary trials, the paper-listbox's selectedItem was still not being appropriately updated after a programmatic selection, so IronMenuBehavior's _onFocus cannot focus the correct corresponding item when we open the color menu and selectedItem remains "stale".

I was previously using @notwaldorf 's original polymer-color-picker, which didn't seem to have this issue because it used a div to hold the color menu instead of a selectable element.

I'll try to elaborate soon by filing an issue/example with IronSelectableBehavior.

[halloweenman]

I'm having this issue too, any fixes known?