I fixed it by cloning the original graphics. Here is my code:
view.on("click", function(e){
// console.log(graphicCollection);
view.hitTest(e.screenPoint).then(function(response){
response.results.forEach(function(g){
var graphic = g.graphic;
// console.log(graphic);
if (graphic) {
var newGraphics = view.graphics.clone();
view.graphics.removeAll();
newGraphics.forEach(function(g){
g.symbol.symbolLayers.items[0].material.color.a = 0.3;
});
var gpcIndex = newGraphics.findIndex(function(item){
return item.id === graphic.id;
});
newGraphics.getItemAt(gpcIndex).symbol.symbolLayers.items[0].material.color.a = 1;
view.graphics = newGraphics;
};
});
});
});
Here I'm changing the opacity of the graphics, I fade all the unselected graphics.
The "zoom to" function of the popup works fine with the above code.