Mouse-over event behavior problem when browser window is in focus

Question

I have an ESRI Web Appbuilder web app with custom widgets and am having a weird issue when trying to register mouse-over events on a feature layer. I noticed that when the Chrome Dev Tools are closed and the browser window is in focus, the mouse-over doesn't appear to be working. A label should appear with the name of the feature when hovering over a point, but nothing seems to be happening. On further inspection the mouse-over is firing, but so is the mouse-out event. They both seem to be firing continuously and preventing the popup from staying open. I have 11 esri point layers with the same problem, but the polygon layers are working as expected.

I am using the recommended method based on ESRI docs and it worked fine in the ArcGIS API for JavaScript sandbox the first time I tested, but today I am getting the exact same behavior in the sandbox as in the app. Something else must be interfering when the window is in focus but it is difficult from me to debug since the issue only occurs with dev tools closed. I am not sure how to debug at this point, or where to look for the cause. Here is the code for one of the layers:

var map = window._viewerMap;

hoverLabel = new Tooltip ({
  id: "",
  style: "position:absolute; z-index:100; background-color:transparent;"
});
hoverLabel.startup();

var infoTemplate = new InfoTemplate ({
  title: "Waterbody",
  content: "<p>${Waterbody}</p><p><a href='https://myDomain/${Region}/${Brochure}/' Target='_blank'>View Brochure</a></p>"
});

var wbLayer = new FeatureLayer('https://my/rest/service/layer/2', {
  id: "Waterbody Info",
  content: infoTemplate,
  mode: FeatureLayer.MODE_SNAPSHOT,
  outFields: ["*"],
  opacity: 1
});      
            
var symbol = new PictureMarkerSymbol ({
  "url": "https://widgets/LocalLayer/images/i_hydro.png",
   "height": 16,
   "width": 16,
   "type": "esriPMS",
   "angle": 0
}) 
      
//Add layer to map and set mouse events
var renderer = new SimpleRenderer(symbol);
wbLayer.setRenderer(renderer);
map.addLayer(wbLayer, 2);
wbLayer.on('load', function(evt) {
  map.setExtent(wbLayer.fullExtent.expand(1.5));
  loading = document.getElementById("loading-div");
  loading.style.display = "none";
  addMouseEvents(wbLayer);   
});

function addMouseEvents(wbLayer) {
  
  wbLayer.on("mouse-over", function(evt) {
     console.log("mouse-over waterbody cluster");
     map.setMapCursor("pointer");
     evt.graphic.getShape().moveToFront();
     wbNameLabel(evt);
  });
      
   wbLayer.on( "mouse-out", lang.hitch(this, function(evt) {
      console.log("mouse-out waterbody cluster");      
      map.setMapCursor("default");
      closeLabel(hoverLabel);            
   }));
}

function wbNameLabel(evt) {
  console.log(evt.graphic.attributes.Waterbody, "waterbody");
  let content = evt.graphic.attributes.Waterbody;
  hoverLabel.setContent(content);
  DijitPopup.open({
    popup: hoverLabel,
    x: evt.pageX,
    y: evt.pageY
  });          
}

function closeLabel(hoverLabel) {
  DijitPopup.close(hoverLabel);
}

Screenshot of hover label working. The cursor is pointer (won't appear in screenshot)

Screenshot with focused window and dev tools closed. No popup and and cursor showing is the default

If anyone has had a similar issue and can provide some ideas on possible causes at least that would be a start.

Answer 1

The issue ended up being the Dijit Popup interfering with the mouse events after opening. I fixed this by simply offsetting the popup a few pixels:

function showLabel(e) {                  
    map.setMapCursor("pointer");
    e.graphic.getShape().moveToFront();
    let content = e.graphic.attributes.Waterbody;
    console.log("showing label for ", content);
    hoverLabel.setContent(content);           
    DijitPopup.open({
      popup: hoverLabel,
      x: e.pageX,
      y: e.pageY,
      padding:{
        x:5,
        y:3
      }
    })                                         
  }

The events work now as expected, however I am still not sure why the window focus and dev tools state affected the events.