Mouse-over events not working when window is in focus

[FranklinAlexander]

I have an app that includes a lot of layers, but I am having an issue with some of the point layers in regards to 'mouse-over' events. For some reason, when the window is in focus (if you click the mouse anywhere on the map or on the window), the 'mouse-over' events appear to stop working. I am only having this issue with the point layers, but for all of the other layers (polygon) in the app the 'mouse-over' events work without issue whether the window is focused or not. The interesting thing is that I have some layers with feature reduction enabled that are working just fine. I am using the recommended method (per esri docs/examples) for all of the mouse-overs. I am not getting errors and have looked at all of the layers to try and find some commonality that may indicate where to look for the issues, but can't find any. Below is a sample of the code I am using (with minor exceptions) for ALL of my mouse-over events:

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(weLayer) {
  
  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(mouseoverLabel);            
   }));
}

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

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

Also, if I 'click' on a feature, I get the hover label AND the popup.  I am fairly certain the code isn't the issue, because I copied and pasted my code the the esri sandbox and the mouse-over/mouse-out works as expected. It is as if something is interferring with the events when the window is in focus, but I don't know how to try and debug since I can't replicate the problem with dev tools open. 

I just tested the above code in the API for Javascript sandbox again and this time I am getting the same behavior as described in my application, so I am attaching the html file downloaded from the sandbox.

[FranklinAlexander · Accepted solution]

The problem has been resolved. It turns out the Dijit Popup was interfering with mouseover event, but only when the window was focused and dev tools open, which I still don't understand. All I had to do was offset the popup:

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
        }
      })          
    }