title: ArcGIS highlight a graphic
body: <p>in my program I have created polygons on a graphicsLayer from coordinates on my mapView. When I hover over a polygon, I want to highlight that polygon with orange color.</p>
  
  <pre><code>require([
          "esri/Map",
          "esri/views/MapView",
          "esri/Graphic",
          "esri/layers/GraphicsLayer",
          "esri/widgets/Search",
          "dojo/dom",
          "esri/renderers/UniqueValueRenderer",
          "esri/symbols/SimpleLineSymbol"
      ], function (Map, MapView, Graphic, GraphicsLayer, Search, dom, UniqueValueRenderer, SimpleLineSymbol) {
          map = new Map({
              basemap: "streets-navigation-vector"
          });
          var center = app.addresses[0].center;
          view = new MapView({
              container: "viewDiv",
              map: map,
              center: center, // longitude, latitude
              zoom: 15,
              highlightOptions: {
                  color: "orange"
              }
          });
  
  
  
          var search = new Search({
              view: view,
              container: "search"
          });
          graphicsLayer = new GraphicsLayer();
  
          map.add(graphicsLayer);
          var i = 0;
          app.addresses.forEach(function (address) {
              var polygon = {
                  type: "polygon",
                  rings: address.polygon_rings
              };
  
              address.polygonGraphic = new Graphic({
                  geometry: polygon,
                  symbol: address.parking_zone
              });
  
              graphicsLayer.add(address.polygonGraphic);
              i++;
          });
  
          view.on("click", function(event){
              var screenPoint = {
                  x: event.x,
                  y: event.y
              };
  
              view.hitTest(screenPoint).then(function (response) {
                  if (response.results.length) {
                      var graphic = response.results.filter(function (result) {
                          // check if the graphic belongs to the layer of interest
                          return result.graphic.layer === graphicsLayer;
                      })[0].graphic;
                      // do something with the result graphic
                      ToggleSelectedAddress(parseInt(graphic.uid));
                  }
              });
          });
  
          view
              .when()
              .then(function() {
                  return graphicsLayer.when();
              })
              .then(function(layer) {
                  // Set up an event handler for pointer-down (mobile)
                  // and pointer-move events (mouse)
                  // and retrieve the screen x, y coordinates
                  return view.whenLayerView(layer);
              })
              .then(function(layerView) {
                  view.on("pointer-move", eventHandler);
                  view.on("pointer-down", eventHandler);
  
                  function eventHandler(event) {
                      // the hitTest() checks to see if any graphics in the view
                      // intersect the x, y coordinates of the pointer
                      view.hitTest(event).then(getGraphics);
                  }
  
                  let highlight;
  
                  function getGraphics(response) {
                      // the topmost graphic from the hurricanesLayer
                      // and display select attribute values from the
                      // graphic to the user
                      if (response.results.length) {
                          const graphic = response.results.filter(function(result) {
                              if(result.graphic.layer === graphicsLayer){
                                  layerView.highlight(result.graphic);
                              }
                              return result.graphic.layer === graphicsLayer;
                          })[0].graphic;
  
                          if(highlight) {
                              console.log("highlighted");
                              highlight.remove();
                          }
                          // highlight all features belonging to the same hurricane as the feature
                          // returned from the hitTest
                          highlight = layerView.highlight(graphic);
                      } else {
                          // remove the highlight if no features are
                          // returned from the hitTest
                          highlight.remove();
                          highlight = null;
                      }
                  }
              });
      });
  </code></pre>
  
  <p>I even tried creating functions that change the symbol on those polygon graphics, but to no success.
  I think, that the else statement at the end is never executed.  Which means, that the hitTest almost always returns a result. I debugged this a little and I saw, that the results are streets, buildings and such. After filtering those results I get the correct graphics I wish to highlight. However, layerView.highlight(graphic) doesn't work. This is how I create my mapView:</p>
  
  <pre><code>view = new MapView({
              container: "viewDiv",
              map: map,
              center: center, // longitude, latitude
              zoom: 15,
              highlightOptions: {
                  color: "orange"
              }
          });
  </code></pre>
  
  <p>When I take the hovered graphic and change its' symbol to orange, it gets highlighted, but doesn't get unhighlighted once I unhover the element (since the else{} statement is almost never executed). Can anyone explain why hitTest always returns a result and why .highlight() doesn't work?</p>