Updating GraphicsLayer graphic colors

[SteveCole]

I have some code that works, but not in the way I am intending. I'm using the Sketch widget with a GraphicsLayer and I'm also using the Calcite Color Picker to provide the option to change the color of the sketched graphics.

In 3.X, when the dojo color picker would change, I was able to change the color of any new sketched graphics *and* the color of any existing graphics in the graphicsLayer. What I'm experiencing in 4.X is different, when the color is changed in the Calcite color picker, the change event is triggered and the code runs to change the color of the Sketch View Model graphics *and* loop through any graphics in the GraphicsLayer to change the color of those graphics. But visually there is no change. Only when the user draws another graphic will the new graphic and any previous graphic change its color.

I want any existing graphic to change its color visually as soon as a color has been selected.

Here's a Codepen to try.

Draw a polygon. Unselect the graphic. Change the color in the color picker. The existing graphic will not change until you draw a second graphic. What am I missing?

[ReneRubalcava · Accepted solution]

Replace the entire symbol to get it to update in real-time.

const symbol = graphic.symbol.clone();
symbol.color = event.srcElement.value;
graphic.symbol = symbol;

[SteveCole]

Argh. Thank you. That was easy.